web-dev-qa-db-fra.com

L'info-bulle de Bootstrap ne disparaît pas après un clic sur un bouton et un départ de 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 se trouve en dehors du bouton. J'ai regardé dans le manuel - info-bulle de Bootstrap et si je clique sur les boutons, je vois le même problème. Y at-il une solution pour résoudre ce problème? Juste essayé dans le dernier FF, IE.

javascripttwitter-bootstraptooltip
95
SilentCry

Ceci est dû au fait que trigger n'est pas défini. La valeur par défaut du déclencheur est 'hover focus', de sorte que l'info-bulle reste visible après un clic sur un bouton, jusqu'à ce qu'un autre bouton soit cliqué, car le bouton est focused.

Il suffit donc de définir trigger comme 'hover' uniquement. Ci-dessous, le même exemple que celui auquel vous avez accédé sans info-bulles persistante après avoir cliqué sur un bouton:

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

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

193
davidkonrad

Je connais plus d'un an, mais je ne pouvais pas que cela fonctionne avec des exemples ici. J'ai dû utiliser les éléments suivants:

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

Cela montre également l'info-bulle à nouveau en vol stationnaire.

49
Nitai

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

nous avons trouvé sur le Web des solutions qui recommandent à .hide () d'afficher une info-bulle sur les éléments Cliquez sur l'événement - mais c'est une mauvaise idée: revenir au même élément - le garder 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 deCourse ...

8
Kamornik Cola

Bonjour, j'ai peu de solution à ce problème. Lorsque les autres solutions ne fonctionnent pas, essayez simplement 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 une solution pour glisser et déposer aussi. J'espère que cela aidera quelqu'un :)

8
Nienormalny_

Aussi, vous pouvez ajouter:

onclick="this.blur()"
2
Sergey Koshkin

La réponse de David ci-dessus a aidé à résoudre mon problème. J'ai eu le survol et cliquez sur l'événement sur le bouton. Firefox sur MAC s'est comporté comme je le voulais. C'est-à-dire, afficher les info-bulles en survol, ne pas afficher les info-bulles pour un clic. Sur d’autres navigateurs et systèmes d’exploitation, lorsque je clique sur mon clavier, l’info-bulle apparaît et reste inchangée. Même si je déplace la souris vers d'autres boutons pour le survol. Voici ce que j'ai eu:

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

C'est le correctif:

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

Essayez d'utiliser rel="tooltip" au lieu de data-toggle="tooltip" qui a fonctionné dans mon cas. J'utilisais data-toggle="tooltip" et je définissais également la condition de déclenchement en vol stationnaire, 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 // Tooltip $ ('. Btn'). Tooltip ({trigger: 'survol'});

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

2
Jestino Sam

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

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

dans angular 7 avec bootstrap 4 et jQuery j'ai trouvé cela et cela fonctionne bien. J'ai utilisé dispose parce que 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');
    });
   }
1
user1983909

Solution de travail

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

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

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

Dans votre fonction de préparation de document, utilisez cette

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

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 d'entre elles 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
WHY

Vous pouvez également utiliser la méthode ci-dessous pour masquer les info-bulles sur mouseleave, comme ci-dessous:

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

Cela fonctionne pour moi:

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

});

Je désactivais le bouton de sauvegarde de manière dynamique, alors le problème était.

0
Devendra Singraul

J'utilise bootstrap tooltip 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
Brian C.

Dans mon cas, c'était le correctif:

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

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

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

0
Gabi L