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

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. L'utilisation de display:block et display:inline-block semble fonctionner correctement. Il semble également fonctionner correctement avec un wrapper flotté.

UPDATE voici un jsfiddle mis à jour qui fonctionne avec le dernier Bootstrap (3.3.6). Merci à @ JohnLehmann pour avoir suggéré pointer-events: none; pour 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 obtenir des boutons désactivés Pour afficher l'info-bulle 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 les info-bulles sur les cases à cocher, les zones de texte et autres, alors voici ma solution de contournement 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 crois 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, vous devriez lui dire pourquoi.

Ces solutions de contournement sont laides. J'ai débogué le problème est que bootstrap définit automatiquement la propriété CSS pointer-events: none sur les éléments désactivés.

Cette propriété magique provoque que JS ne peut gérer aucun événement sur les éléments qui correspondent à CSS selector.

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 le sélecteur Si général, car vous devrez probablement le faire arrêtez manuellement la propagation des événements JavaScript comme vous le savez ( e. preventDefault () ).

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 le bouton désactivé (de sorte qu'il ressemble et agit comme son désactivé), de sorte que vous pouvez ensuite déclencher l'info-bulle.

Par exemple. Javascript:

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

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

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

Dans mon cas, aucune des solutions ci-dessus n'a fonctionné. J'ai trouvé qu'il est 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:

Info-bulles doivent être initialisées avec jQuery: sélectionnez l'élément spécifié et d'appeler la tooltip() méthode 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>

C'est ce que tekromancr et moi-même avons trouvé.

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>

Remarque: l'info-bulle attributs peuvent être ajoutés à un div dont l'id de la div doit être utilisé lors de l'appel .info-bulle ('détruire'); ou .info-bulle ();

Cela active l'info-bulle, mettez-la dans n'importe quel javascript inclus dans le fichier html. cette ligne pourrait ne pas être nécessaire d'ajouter, cependant. (si l'info-bulle affiche sans cette ligne, alors ne vous embêtez pas à l'inclure)

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

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

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

Empêche le bouton d'être cliquable. parce que l'attribut disabled 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. Remplacer ces dans votre propre .fichier css. vous pouvez ajouter des couleurs ou ce que vous voulez que le bouton ressembler lorsqu'il est désactivé. Assurez-vous de garder le curseur: par défaut; vous pouvez également changer quoi .btn.btn-le succès ressemble.

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

Ajoutez le code ci-dessous à tout javascript contrôlant que le bouton devient activé.

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

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

Si vous utilisez angularjs j'ai aussi une solution pour que, si vous le souhaitez.

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 toujours être explicite et désactiver des boutons spécifiques par exemple

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

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

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.

, Car le champ de saisie n'est pas désactivé, l'info-bulle s'affiche correctement. C'était dans mon cas beaucoup plus simple que d'ajouter un wrapper au cas où le champ de saisie était 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">

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 génial pour la validation car le code nécessite moins de logique.

J'ai écrit ce stylo pour illustrer.

CSS3 désactivé info-bulles

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

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>