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

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.

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/

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.

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 :)

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

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

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.

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

Vous pouvez également ajouter:

onclick="this.blur()"

Solution de travail

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

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

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

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

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

Cela fonctionne pour moi:

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

});

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

Dans votre fonction de document prêt, utilisez ceci

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

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.

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

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

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.

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>

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

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')
})

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