L'info-bulle de Bootstrap ne disparaît pas après un clic sur un bouton et un départ de la souris


115

J'ai un problème avec l'info-bulle de bootstrap: lorsque je clique sur un bouton, l'info-bulle reste même si le curseur est en dehors du bouton. J'ai regardé dans le manuel - l'info-bulle de Bootstrap et si je clique sur les boutons, je vois le même problème. Y a-t-il une solution pour résoudre ce problème? Juste essayé dans le dernier FF, IE.


Cela ne fonctionne pas en lien dans ma question aussi, regardons-y. Il y a le même problème.
SilentCry

Réponses:


241

C'est parce que triggern'est pas défini. La valeur par défaut du déclencheur est 'hover focus', donc l'info-bulle reste visible après avoir cliqué sur un bouton, jusqu'à ce qu'un autre bouton soit cliqué, car le bouton l'est focused.

Donc, tout ce que vous avez à faire est de définir triggercomme 'hover'seul. Ci-dessous le même exemple que vous avez lié sans les info-bulles persistantes après avoir cliqué sur un bouton:

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

l'exemple doc dans un violon -> http://jsfiddle.net/vdzvvg6o/


1
Merci David, cela fonctionne vraiment. J'ai mal compris l'option de déclenchement de l'info-bulle en dernier, maintenant j'ai raison.
SilentCry

1
@SilentCry Gardez simplement à l'esprit qui vous ciblez, déclencher un "survol" n'est pas toujours facile / courant.
phk

3
@davidkonrad Plateformes mobiles, utilisateurs aveugles. Cela pourrait également expliquer pourquoi ils ont défini le `` focus de survol '' par défaut.
phk

2
@phk, bootstrap a un problème général de ne pas être d'abord mobile, en ce qui concerne les aveugles, nous devrions utiliser les attributs aria. Il existe BTW un excellent outil pour tester la convivialité développé pour les autorités canadiennes avec plusieurs "niveaux" que vous pouvez remplir -> achecker.ca/checker/index.php mon pays n'a pas ces normes, mais il vaut la peine de les respecter en tous cas.
davidkonrad

1
Vous voudrez peut-être jeter un coup d'œil à la réponse de Karmonik Cola ci-dessous. Il continue d'afficher l'info-bulle sur le focus.
David Stosik

63

Je connais plus d'un an, mais je n'ai pas réussi à faire fonctionner cela avec des exemples ici. J'ai dû utiliser ce qui suit:

$('[rel="tooltip"]').on('click', function () {
    $(this).tooltip('hide')
})

Cela montre également l'info-bulle lors du survol.


1
Cela doit être la réponse acceptée et doit également être implémentée dans la base de code d'amorçage.
kjdion84

5
Cela a été extrêmement utile pour les info-bulles d'amorçage placées sur des boutons avec un déclencheur de «survol» qui provoquent des publications asynchrones (c'est-à-dire afficher des panneaux modaux). Sans cela, la publication de la pression sur le bouton provoque le blocage de l'info-bulle et ne disparaît jamais.
bradykey

1
Dans mon cas, je désactivais le bouton d'envoi pendant qu'une action ajax était effectuée. Pendant que le processus ajax était en cours d'exécution, l'info-bulle restait puisque le bouton était désactivé. Une fois le processus ajax terminé, le bouton redeviendrait «disponible». Passer la souris sur puis sur le bouton ferait disparaître l'info-bulle. La solution de Nitai a tout réglé. L'info-bulle se masque désormais au clic et fonctionne toujours en survol une fois que le bouton redevient actif.
HPWD

Je suis d'accord avec @ kjdion84. J'ai eu du mal jusqu'à ce que je trouve ça
Ahmad

9

Salut, j'ai peu de solution pour ce problème. Lorsque d'autres solutions ne fonctionnent pas, essayez celle-ci:

$('body').tooltip({
        selector: '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])',
        trigger: 'hover',
        container: 'body'
    }).on('click mousedown mouseup', '[data-toggle="tooltip"], [title]:not([data-toggle="popover"])', function () {
        $('[data-toggle="tooltip"], [title]:not([data-toggle="popover"])').tooltip('destroy');
    });

C'est aussi une solution pour le glisser-déposer. J'espère donc que cela aidera quelqu'un :)


J'avais le problème uniquement avec les boutons de grille Telerik Kendo. Lorsque j'en cliquais sur un, la bulle d'aide ne se cachait pas. Cela l'a résolu!
John81

8

Dans mon cas, le problème n'a été reproduit que dans Internet Explorer: quel que soit l'élément (entrée, div, etc.) qui a une info-bulle - si vous cliquez dessus - l'info-bulle reste affichée.

trouvé des solutions sur le Web qui recommandent .hide () cette info-bulle sur les éléments Click event - mais c'est une mauvaise idée - de revenir au même élément - le garde caché ... dans mon cas

$('.myToolTippedElement').on('click', function () {
    $(this).blur()
})

fait toute la magie !!! - où .myToolTippedElement est l'élément qui a une info-bulle ofCourse ...


Fonctionne aussi pour moi et présente l'avantage par rapport à la solution acceptée de continuer à afficher l'info-bulle sur le focus.
David Stosik

3

dans angular 7 avec bootstrap 4 et jquery j'ai trouvé cela et cela fonctionne très bien. J'ai utilisé disposer car il détruit ne cache pas l'info-bulle.

  ngAfterViewChecked() {
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
    $('[data-toggle="tooltip"]').on('mouseleave', function () {
      $(this).tooltip('dispose');
    });
    $('[data-toggle="tooltip"]').on('click', function () {
      $(this).tooltip('dispose');
    });
   }

2

Essayez d'utiliser rel="tooltip"au lieu de data-toggle="tooltip"ce qui a fonctionné dans mon cas. J'utilisais data-toggle="tooltip"et définissais également la condition de déclenchement comme survol, ce qui ne fonctionnait pas dans mon cas. Lorsque j'ai changé mon sélecteur de données, cela a fonctionné.

Code HTML:

<button id="submit-btn" type="submit" class="btn btn-success" rel="tooltip" title="Click to submit this form">Submit</button>

Code JS // Info-bulle $ ('. Btn'). Tooltip ({trigger: 'hover'});

Cela supprimera définitivement l'info-bulle bloquée.


2

La réponse de David ci-dessus a aidé à résoudre mon problème. J'ai eu à la fois un événement de survol et de clic sur le bouton. Firefox sur MAC s'est comporté comme je le voulais. Autrement dit, afficher l'info-bulle lors du survol, ne pas afficher l'info-bulle pour le clic. Sur d'autres navigateurs et OS, lorsque je clique, l'info-bulle apparaît et reste telle qu'elle apparaît. Même si je déplace la souris vers d'autres boutons pour survoler. Voici ce que j'avais:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true}); 

Voici le correctif:

$('[data-toggle="tooltip"]').tooltip({placement: 'right', html: true, trigger: 'hover'}); 

2

Vous pouvez également ajouter:

onclick="this.blur()"

1
en quoi est-ce différent de ce que Kamornik Cola a proposé (sauf pour l'implémentation sans jQuery)? Je suggère d'ajouter quelques explications pour que la réponse soit utile. Meilleures salutations
YakovL

2

Solution de travail

$(document).on("click",function()
    {
    setTimeout(function()
    {

  $('[data-toggle="tooltip"]').tooltip('hide');

},500);    // Hides tooltip in 500 milliseconds
    });

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant la raison et / ou la manière dont ce code répond à la question améliore sa valeur à long terme.
Adam le

@Adam Je n'ai pas pu trouver de solutions fonctionnelles sur les forums pour masquer une info-bulle après avoir cliqué sur un <a>, un <button> ou d'autres éléments auxquels une fonctionnalité ou une apparence de bouton est attachée.
Alpha

1

J'ai résolu ce problème en supprimant l'info-bulle dans la fonction d'événement de clic à l'aide du code suivant:

$("#myButton").on("click", function() {
    $("div[role=tooltip]").remove();
});

1
pouvez-vous récupérer l'info-bulle en survolant?
Vishnu

0

J'utilise l'info-bulle bootstrap dans cycle.js et rien de ce qui précède n'a fonctionné pour moi.

Je devais faire ceci:

return button( selector + '.btn.btn-sm', 
             {
               hook: {
                 destroy: tooltipOff,
                 insert:  toggleTooltipOn,
               },
....

function toggleTooltipOn(vnode){
  setupJQuery();  
  jQuery[0].$( vnode.elm )
    .tooltip({container:'body', trigger: 'hover');
//container:body is to help tooltips not wiggle on hover
//trigger:hover is to only trigger on hover, not on click
}

function tooltipOff( vnode ){
  setupJQuery();      
  jQuery[0].$( vnode.elm ).tooltip('hide');
}

0

Cela fonctionne pour moi:

$(document).ready(function() {
   $('#save').tooltip({
            trigger : 'hover'
        }) ;

});

Je désactivais le bouton de sauvegarde dynamiquement, puis le problème était.


Voici enregistrer l'ID de mon bouton
Devendra Singraul

0

Dans votre fonction de document prêt, utilisez ceci

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

0

Cette solution a fonctionné pour moi.

$('a[data-toggle="tooltip"]').tooltip({
  animated: 'fade',
  placement: 'bottom',
  trigger: 'click'
});

$('a[data-toggle="tooltip"]').click(function(event){
  event.stopPropagation();
});

$('body').click(function(){
  $('a[data-toggle="tooltip"]').tooltip('hide');
});

violon

J'ai essayé la plupart des solutions données dans les réponses précédentes, mais aucune n'a fonctionné pour moi.


0

Mon problème est dans DataTable. Le code ci-dessous fonctionne pour moi.

columnDefs: [ { targets: 0, data: "id", render: function (data, type, full, meta) { return '<a href="javascript:;" class="btn btn-xs btn-default" data-toggle="tooltip" title="Pending" data-container="body"><i class="fa fa-check"></i></a>'; } } ], drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').on('click', function () { $(this).tooltip('hide'); }); }


0

Vous pouvez également utiliser la méthode ci-dessous pour masquer l'info-bulle sur la souris , comme ci-dessous:

jQuery("body").on("mouseleave", ".has-tooltip", function(){
    jQuery(this).blur();
});

0

Dans mon cas, c'était la solution:

beforeDestroyingElement() {    
  $('[data-toggle="tooltip"]').tooltip('hide');
}

Je n'obéissais pas à cette règle de la documentation Bootstrap:

Les info-bulles doivent être masquées avant que leurs éléments correspondants aient été supprimés du DOM.


0

Ceci est également réalisable dans le HTML en ajoutant ce qui suit:

 data-trigger="hover"

 <button type="button" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="To re-enable scanning, click here">Text</button>

Malheureusement, cela ne fonctionne pas et l'info-bulle est toujours bloquée.
Fwd079

0

Vous pouvez également utiliser cette méthode pour les anciennes versions car la réponse acceptée n'a pas fonctionné pour moi et j'ai écrit ce code pour moi-même et cela fonctionne bien.

$(document).on('mousedown', "[aria-describedby]", function() {
    $("[aria-describedby]").tooltip('hide');
});

0

Si quelqu'un veut configurer une info-bulle qui s'affichera pendant un certain temps après le clic, voici comment j'ai fait:

$('[data-toggle="tooltip"]').tooltip({
trigger : 'click'})  

$('[data-toggle="tooltip"]').on('shown.bs.tooltip', function () {
$(this).tooltip('hide')
})

0

L'utilisation d'un flou forcé () a le potentiel de réduire l'expérience utilisateur. Je ne ferais pas ça. J'ai trouvé que la suppression du "data-original-title" ainsi que la suppression des attributs "data-toggle" et "title" fonctionnaient pour moi.

    $(id).tooltip('hide');
    $(id).removeAttr("data-toggle");
    $(id).removeAttr("data-original-title");
    $(id).removeAttr("title");
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.