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

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.

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.

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/

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;
}

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.

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 () ).

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

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>

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/

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;
}

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.

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>

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

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;
}

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>

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.

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">

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>

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é.