Comment activer l'info-bulle Bootstrap sur le bouton désactivé?


171

J'ai besoin d'afficher une info-bulle sur un bouton désactivé et de la supprimer sur un bouton activé. Actuellement, cela fonctionne à l'envers.

Quelle est la meilleure façon d'inverser ce comportement?

$('[rel=tooltip]').tooltip();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

Voici une démo

PS: je veux garder l' disabledattribut.


le bouton qui doit être désactivé est désactivé ...
KoU_warch

@EH_warch Je veux garder le bouton désactivé mais en même temps afficher une info-bulle sur l'événement de clic.
Lorraine Bernard

2
Cela n'aidera pas l'OP, mais les futurs visiteurs apprécieront peut-être de savoir que l'attribut 'readonly' est similaire (mais pas identique) et ne bloque pas les événements utilisateur comme le survol de la souris.
Chuck

Réponses:


20

Voici un code de travail: http://jsfiddle.net/mihaifm/W7XNU/200/

$('body').tooltip({
    selector: '[rel="tooltip"]'
});

$(".btn").click(function(e) {
    if (! $(this).hasClass("disabled"))
    {
        $(".disabled").removeClass("disabled").attr("rel", null);

        $(this).addClass("disabled").attr("rel", "tooltip");
    }
});

L'idée est d'ajouter l'info-bulle à un élément parent avec l' selectoroption, puis d'ajouter / supprimer l' relattribut lors de l'activation / désactivation du bouton.


4
C'est la réponse acceptée car elle a fonctionné en 2012, quand on y a répondu. Les choses ont changé depuis, principalement les ressources externes utilisées dans le violon. J'ai ajouté de nouvelles URL pour bootstrap cdn, le code est toujours le même.
mihai

3
Puis-je obtenir un correctif mis à jour pour cela pour Bootstrap version 4.1?
Jason Ayer

258

Vous pouvez envelopper le bouton désactivé et placer l'info-bulle sur le wrapper:

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

Si le wrapper a, display:inlinealors l'info-bulle ne semble pas fonctionner. Utilisation display:blocket display:inline-blocksemble fonctionner correctement. Il semble également fonctionner correctement avec un wrapper flottant.

MISE À JOUR Voici un JSFiddle mis à jour qui fonctionne avec le dernier Bootstrap (3.3.6). Merci à @JohnLehmann pour avoir suggéré pointer-events: none;le bouton désactivé.

http://jsfiddle.net/cSSUA/209/


5
C'est ce que la documentation suggère et cela fonctionne si vous utilisez l'astuce du bloc en ligne suggérée ici!
Devil's Advocate

4
Cependant, si votre bouton fait partie d'un groupe de boutons, l'enveloppement du bouton jette un coup d'œil à votre esthétique: (Quoi qu'il en soit, pour surmonter ce problème pour btn-groups?
Cody

2
Cody, pour les groupes btn, j'ai trouvé que vous ne pouvez pas les envelopper, ou ils ne seront pas rendus correctement. J'ai défini les événements de pointeur sur 'auto' (juste ciblé avec: "div.btn-group> .btn.disabled {pointer-events: auto;}" juste au cas où), et j'ai également connecté l'événement onclick du bouton pour il renvoie juste faux. Senti hacky, mais cela a fonctionné pour notre application.
Michael

3
Cela ne semble pas fonctionner dans bootstrap 3.3.5. JSFiddle
octroyé le

18
Pour bootstrap 3.3.5, ajoutez également .btn-default [disabled] {pointer-events: none; }
John Lehmann

111

Cela peut être fait via CSS. La propriété "pointer-events" est ce qui empêche l'info-bulle d'apparaître. Vous pouvez désactiver les boutons pour afficher les info-bulles en remplaçant la propriété "pointer-events" définie par bootstrap.

.btn.disabled {
    pointer-events: auto;
}

1
Juste une note latérale, cela ne fonctionne que pour IE dans 11 ou plus. Presque tous les autres navigateurs modernes le prennent en charge depuis un certain temps. Voir: caniuse.com/#feat=pointer-events
Neil Monroe

11
Cela ne semble pas fonctionner sur les [disabled]boutons. Ne voyez pas non plus Bootstrap (2.3.2) attribuant des événements de pointeur n'importe où dans la source.
kangax

1
@kangax vous avez raison, cela ne fonctionnera que pour les boutons désactivés via la classe bs 'disabled'. La réponse de Balexand ( stackoverflow.com/a/19938049/1794871 ) fonctionnera mieux dans ce cas. Merci d'avoir fait remarquer cela.
Gene Parcellano

6
Dans une application angulaire bootstrap3, après avoir appliqué ce style, le bouton désactivé est maintenant cliquable
Dimitri Kopriwa

3
J'ai essayé de l'utiliser sur une ancre avec la classe btn. Il semblait désactivé et l'info-bulle fonctionnait, mais je pouvais cliquer sur le lien (cela ne devrait pas être possible).
Olle Härstedt

26

Si vous êtes désespéré (comme je l'étais) pour des info-bulles sur les cases à cocher, les zones de texte et autres, alors voici ma solution de contournement de hackey:

$('input:disabled, button:disabled').after(function (e) {
    d = $("<div>");
    i = $(this);
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "absolute",
    })
    d.css(i.offset());
    d.attr("title", i.attr("title"));
    d.tooltip();
    return d;
});

Exemples de travail: http://jsfiddle.net/WB6bM/11/

Pour ce que cela vaut, je pense que les info-bulles sur les éléments de formulaire désactivés sont très importantes pour l'UX. Si vous empêchez quelqu'un de faire quelque chose, dites-lui pourquoi.


1
Cela devrait être la bonne réponse. Cela ne me semble pas du tout piraté :)
Starkers

5
Quel cauchemar pour quelque chose qui devrait être cuit dans :(
Devil's Advocate

1
Cela fonctionne bien, mais si vos positions d'entrée changent en fonction de la taille de la fenêtre (comme si vos éléments de formulaire sont enveloppés / déplacés), vous devrez ajouter un peu de gestion sur $ (window) .resize pour déplacer l'info-bulle div autour, ou ils apparaîtront au mauvais endroit. Je recommande de combiner avec la réponse de CMS d'ici: stackoverflow.com/questions/2854407
...

6

Ces solutions de contournement sont laides. J'ai débogué le problème est que le bootstrap définit automatiquement les événements de pointeur de propriété CSS : aucun sur les éléments désactivés.

Cette propriété magique fait que JS ne peut gérer aucun événement sur les éléments qui correspondent au sélecteur CSS.

Si vous écrasez cette propriété par défaut, tout fonctionne comme un charme, y compris les infobulles!

.disabled {
  pointer-events: all !important;
}

Cependant, vous ne devriez pas utiliser un sélecteur aussi général, car vous devrez probablement arrêter manuellement la propagation d'événements JavaScript comme vous le savez ( e.preventDefault () ).


6

Dans mon cas, aucune des solutions ci-dessus n'a fonctionné. J'ai trouvé qu'il était plus facile de chevaucher le bouton désactivé en utilisant un élément absolu comme:

<div rel="tooltip" title="I workz" class="wrap">
  <div class="overlap"></div>
  <button>I workz</button>
</div>

<div rel="tooltip" title="Boo!!" class="wrap poptooltip">
  <div class="overlap"></div>
  <button disabled>I workz disabled</button>
</div>

.wrap {
  display: inline-block;
  position: relative;
}

.overlap {
  display: none
}

.poptooltip .overlap {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

Démo


6

Essayez cet exemple:

Les info-bulles doivent être initialisées avec jQuery: sélectionnez l'élément spécifié et appelez la tooltip()méthode dans JavaScript:

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

Ajouter CSS:

.tool-tip {
  display: inline-block;
}

.tool-tip [disabled] {
  pointer-events: none;
}

Et votre html:

<span class="tool-tip" data-toggle="tooltip" data-placement="bottom" title="I am Tooltip">
    <button disabled="disabled">I am disabled</button>
</span>

5

Vous ne pouvez pas afficher l'info-bulle sur un bouton désactivé. En effet, les éléments désactivés ne déclenchent aucun événement, y compris l'info-bulle. Votre meilleur pari serait de simuler la désactivation du bouton (afin qu'il ressemble et se comporte comme s'il était désactivé), afin que vous puissiez ensuite déclencher l'info-bulle.

Par exemple. Javascript:

$('[rel=tooltip].disabled').tooltip();

$('[rel=tooltip].disabled').bind('click', function(){
     return false;
});

Au lieu de juste $('[rel=tooltip]').tooltip();​

HTML:

<hr>
<button class="btn disabled" rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>

<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

JSFiddle: http://jsfiddle.net/BA4zM/75/


1
Je recherche une solution avec le bouton désactivé.
Lorraine Bernard

1
@Adam Absolument rien! Bien sûr, vous pouvez obtenir une info-bulle sur un bouton désactivé!
Starkers

4

Vous pouvez simplement remplacer le style "pointer-events" de Bootstrap pour les boutons désactivés via CSS, par exemple

.btn[disabled] {
 pointer-events: all !important;
}

Mieux vaut encore être explicite et désactiver des boutons spécifiques par exemple

#buttonId[disabled] {
 pointer-events: all !important;
}

1
Travaillé! Je vous remercie!
Vedran Mandić

Heureux de pouvoir aider @ VedranMandić :)
Ben Smith

3

C'est ce que moi et tekromancr avons imaginé.

Exemple d'élément:

<a href="http://www.google.com" id="btn" type="button" class="btn btn-disabled" data-placement="top" data-toggle="tooltip" data-title="I'm a tooltip">Press Me</a>

note: les attributs de l'info-bulle peuvent être ajoutés à un div séparé, dans lequel l'id de ce div doit être utilisé lors de l'appel .tooltip ('destroy'); ou .tooltip ();

cela active l'info-bulle, placez-la dans n'importe quel javascript inclus dans le fichier html. il n'est peut-être pas nécessaire d'ajouter cette ligne, cependant. (si l'info-bulle montre sans cette ligne, ne vous souciez pas de l'inclure)

$("#element_id").tooltip();

détruit l'info-bulle, voir ci-dessous pour l'utilisation.

$("#element_id").tooltip('destroy');

empêche le bouton d'être cliquable. parce que l'attribut désactivé n'est pas utilisé, cela est nécessaire, sinon le bouton serait toujours cliquable même s'il «semble» comme s'il était désactivé.

$("#element_id").click(
  function(evt){
    if ($(this).hasClass("btn-disabled")) {
      evt.preventDefault();
      return false;
    }
  });

En utilisant bootstrap, les classes btn et btn-disabled sont à votre disposition. Remplacez-les dans votre propre fichier .css. vous pouvez ajouter toutes les couleurs ou ce que vous voulez que le bouton ressemble lorsqu'il est désactivé. Assurez-vous de conserver le curseur: default; vous pouvez également modifier l'apparence de .btn.btn-success.

.btn.btn-disabled{
    cursor: default;
}

ajoutez le code ci-dessous à tout ce que javascript contrôle l'activation du bouton.

$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');

l'info-bulle ne devrait maintenant s'afficher que lorsque le bouton est désactivé.

si vous utilisez angularjs, j'ai également une solution pour cela, si vous le souhaitez.


J'ai rencontré un problème lors de l'utilisation destroyde l'info-bulle. (Voir ceci ) Cependant, $("#element_id").tooltip('disable')et $("#element_id").tooltip('enable')travaillez pour moi.
Sam Kah Chiin

2

Si cela aide quelqu'un, j'ai pu obtenir un bouton désactivé pour afficher une info-bulle en plaçant simplement une étendue à l'intérieur et en appliquant les info-bulles là-bas, angularjs autour d'elle ...

<button ng-click="$ctrl.onClickDoThis()"
        ng-disabled="!$ctrl.selectedStuff.length">
  <span tooltip-enable="!$ctrl.selectedStuff.length"
        tooltip-append-to-body="true"
        uib-tooltip="Select at least one thing to enable button.">
    My Butt
  </span>
</button>

1
Tu es génial. Une solution si simple.
brt

2

Basé sur Bootstrap 4

Éléments désactivés Les éléments avec l'attribut désactivé ne sont pas interactifs, ce qui signifie que les utilisateurs ne peuvent pas se concentrer, survoler ou cliquer dessus pour déclencher une info-bulle (ou un popover). Pour contourner ce problème, vous souhaiterez déclencher l'info-bulle à partir d'un wrapper ou, idéalement, avec le focus clavier à l'aide de tabindex = "0", et remplacer les événements de pointeur sur l'élément désactivé.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Tous les détails ici: Bootstrap 4 doc


1
Merci pour le message, je peux croire que j'ai négligé cette configuration.
Edd

1

Code de travail pour Bootstrap 3.3.6

Javascript:

$('body').tooltip({
  selector: '[data-toggle="tooltip"]'
});

$(".btn").click(function(e) {
 if ($(this).hasClass("disabled")){
   e.preventDefault();
 }
});

CSS:

a.btn.disabled, fieldset[disabled] a.btn {
  pointer-events: auto;
}

1

Vous pouvez imiter l'effet en utilisant CSS3.

Supprimez simplement l'état désactivé du bouton et l'info-bulle n'apparaît plus. C'est parfait pour la validation car le code nécessite moins de logique.

J'ai écrit ce stylo pour illustrer.

Info-bulles désactivées CSS3

[disabled] {
  &[disabled-tooltip] {
    cursor:not-allowed;
    position: relative;
    &:hover {
      &:before {
        content:'';
        border:5px solid transparent;
        border-top:5px solid black;
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -5px));
      }
      &:after {
        content: attr(disabled-tooltip);
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -15px));
        width:280px;
        background-color:black;
        color:white;
        border-radius:5px;
        padding:8px 12px;
        white-space:normal;
        line-height:1;
      }
    }
  }
}

<button type="button" class="btn btn-primary" disabled-tooltip="I am a disabled tooltip using CSS3.. You can not click this button." disabled>Primary Button</button>

1

Ajoutez simplement la classe désactivée au bouton au lieu de l'attribut désactivé pour la rendre visiblement désactivée à la place.

<button class="btn disabled" rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>

Remarque: ce bouton ne semble être désactivé, mais il déclenche toujours des événements, et vous devez juste en tenir compte.


0

pointer-events: auto;ne fonctionne pas sur un <input type="text" />.

J'ai adopté une approche différente. Je ne désactive pas le champ de saisie, mais le fais agir comme désactivé via css et javascript.

Comme le champ de saisie n'est pas désactivé, l'info-bulle s'affiche correctement. C'était dans mon cas bien plus simple que d'ajouter un wrapper au cas où le champ de saisie serait désactivé.

$(document).ready(function () {
  $('.disabled[data-toggle="tooltip"]').tooltip();
  $('.disabled').mousedown(function(event){
    event.stopImmediatePropagation();
    return false;
  });
});
input[type=text].disabled{
  cursor: default;
  margin-top: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<input type="text" name="my_field" value="100" class="disabled" list="values_z1" data-toggle="tooltip" data-placement="top" title="this is 10*10">


0

Pour Bootstrap 3

HTML

<button 
    class="btn btn-success" 
    disabled
    data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Submit button
</button>

CSS

button { position:relative; }

.sp-btn-overlap { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background:none; 
    border:none; 
    z-index:1900;
}

JS

$('button .sp-btn-overlap')
    .popover({
        trigger: 'hover',
        container: 'body',
        placement: 'bottom',
        content: function() {
            return $(this).parent().prop('disabled')
                    ? $(this).data('hint')
                    : $(this).parent().data('hint');
            }
        });

$('button .sp-btn-overlap')
  .popover({
    trigger: 'hover',
    container: 'body',
    placement: 'bottom',
    content: function() {
      return $(this).parent().prop('disabled')
                  ? $(this).data('hint')
                  : $(this).parent().data('hint'); }
  });
button {
  position:relative; /* important! */
}

.sp-btn-overlap {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:none;
  border:none;
  z-index:1900;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button disabled class="btn btn-default" data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Disabled button
</button>

<button class="btn btn-default" data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Enabled button
</button>


0

J'ai finalement résolu ce problème, au moins avec Safari, en mettant "pointer-events: auto" avant "disabled". L'ordre inverse n'a pas fonctionné.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.