web-dev-qa-db-fra.com

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

Je dois afficher une info-bulle sur un bouton désactivé et la supprimer sur un bouton activé. Actuellement, cela fonctionne en sens inverse.

Quel est le meilleur moyen 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

P.S .: Je veux conserver l'attribut disabled.

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-tooltip
153
Lorraine Bernard

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

16
mihai

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 l'encapsuleur a display:inline, alors l'info-bulle ne semble pas fonctionner. Utiliser display:block et display:inline-block semble fonctionner correctement. Cela semble également fonctionner correctement avec une enveloppe flottante.

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

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

236
balexand

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;
}
106
Gene Parcellano

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 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 leur dire pourquoi.

24
nolanpro

Ces solutions de contournement sont laides. Le problème est que bootstrap a défini automatiquement la propriété CSS pointeur-événements: aucun sur les éléments désactivés.

Cette propriété magique fait que JS n'est pas en mesure de gérer un événement sur des éléments correspondant au sélecteur CSS.

Si vous écrasez cette propriété par défaut, tout fonctionnera comme un charme, y compris les info-bulles!

.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énement JavaScript comme vous le savez (e.preventDefault ()).

6
lukyer

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 choix serait de simuler l'activation du bouton (pour qu'il ressemble et agit comme s'il était désactivé), afin de pouvoir 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/

5
Adam

Essayez cet exemple:

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

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 tel que:

<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

5
vorillaz

Vous pouvez simplement remplacer le style "événements de pointeur" de Bootstrap pour les boutons désactivés via CSS, par exemple.

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

Mieux encore, soyez explicite et désactivez des boutons spécifiques, par exemple.

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

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

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: les attributs d'info-bulle peuvent être ajoutés à un div séparé, dans lequel l'id de ce div doit être utilisé lors de l'appel de .tooltip ('destroy'); ou .tooltip ();

cela active l'infobulle, mettez-la dans n'importe quel javascript inclus dans le fichier html. cette ligne peut ne pas être nécessaire d'ajouter, cependant. (si l'info-bulle ne montre pas cette ligne, alors ne vous inquiétez pas de l'inclure)

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

détruit l'infobulle, voir ci-dessous pour son utilisation.

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

empêche le bouton d'être cliquable. étant donné que l'attribut disabled n'est pas utilisé, cela est nécessaire, sinon le bouton resterait 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;
    }
  });

À l’aide de bootstrap, les classes btn et btn-disabled sont disponibles. Remplacez-les dans votre propre fichier .css. vous pouvez ajouter n'importe quelle couleur ou ce que vous voulez pour le bouton lorsqu'il est désactivé. Assurez-vous de garder le curseur: default; vous pouvez également changer le succès de .btn.btn.

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

ajoutez le code ci-dessous à ce que javascript contrôle le bouton qui devient activé.

$("#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 aussi une solution à cela, si vous le souhaitez.

3
user3885123

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
Nerian

Vous pouvez imiter l'effet à l'aide de CSS3.

Supprimez simplement le bouton de l'état désactivé pour que l'info-bulle n'apparaisse plus. C'est un excellent moyen de validation car le code nécessite moins de logique.

J'ai écrit ce stylo pour illustrer.

Infobulles désactivées CSS

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

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

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

Le champ de saisie n'étant pas désactivé, l'info-bulle s'affiche correctement. Dans mon cas, c'était plus simple que d'ajouter un wrapper dans le 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">
0
John Smith

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
Helgi Kropp