comment activer l'info-bulle d'amorçage sur le bouton désactivé

Question

J'ai besoin d'afficher une info-bulle sur le bouton désactivé et de le supprimer sur le bouton activé. En fait, cela fonctionne de manière inverse.

Quel est le meilleur moyen d'inverser ce comportement?

Voici le code js:

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

Voici la démo: http://jsfiddle.net/BA4zM/68/

PS: Je veux garder l'attribut désactivé.

Answer 1

Vous pouvez envelopper le bouton désactivé et mettre 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:inline alors l'info-bulle ne semble pas fonctionner. Utiliser display:block et display:inline-block semble bien fonctionner. Cela semble également fonctionner correctement avec une enveloppe flottante.

Cette réponse s'applique à Bootstrap 3.0.2. Voici un JSFiddle: http://jsfiddle.net/cSSUA/2/

Answer 2

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

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

Answer 3

Si vous êtes désespéré (comme je l'étais) pour les info-bulles sur les cases à cocher, les zones de texte et autres, voici la solution de contournement de mon 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 infobulles 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, vous devriez leur dire pourquoi.

Answer 4

Voici quelques codes de travail: http://jsfiddle.net/mihaifm/W7XNU/1/

 $('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'option selector , puis d'ajouter / supprimer l'attribut rel lors de l'activation / désactivation du bouton.

Answer 5

Vous ne pouvez pas obtenir l'info-bulle pour afficher sur un bouton désactivé. C'est parce que les handicapés éléments ne déclenchent pas tous les événements, y compris l'infobulle. Votre meilleur pari serait de le faux le bouton handicapés (de sorte qu'il ressemble et agit comme son désactivé), donc vous pouvez alors déclencher l'outil à pointe.

Par exemple. Javascript:

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

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

Au lieu de simplement en $('[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/