Der Tooltip von Bootstrap verschwindet nicht nach dem Klicken auf die Schaltfläche und dem Mausklick

Ich habe ein Problem mit dem Tooltip von Bootstrap: Wenn ich auf eine Schaltfläche klicke, bleibt der Tooltip auch dann erhalten, wenn sich der Cursor außerhalb der Schaltfläche befindet. Ich habe in das Handbuch - Bootstraps Tooltip geschaut und wenn ich auf die Schaltflächen klicke, sehe ich das gleiche Problem. Gibt es eine Lösung, um dies zu beheben? Gerade im neuesten FF, IE ausprobiert.

Dies liegt daran, dass triggernicht eingestellt ist. Der Standardwert für den Trigger ist 'hover focus', sodass der Tooltip nach dem Klicken auf eine Schaltfläche sichtbar bleibt, bis auf eine andere Schaltfläche geklickt wird, da die Schaltfläche aktiviert ist focused.

Alles was Sie tun müssen, ist triggerals 'hover'nur zu definieren . Unter dem gleichen Beispiel, auf das Sie verlinkt haben, ohne die QuickInfos beizubehalten, nachdem Sie auf eine Schaltfläche geklickt haben:

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

das doc-Beispiel in einer Geige -> http://jsfiddle.net/vdzvvg6o/

Ich weiß über ein Jahr alt, aber ich konnte dies hier nicht mit Beispielen zum Laufen bringen. Ich musste folgendes verwenden:

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

Dies zeigt auch den Tooltip beim Hover wieder.

Hallo, ich habe wenig Lösung für dieses Problem. Wenn andere Lösungen nicht funktionieren, versuchen Sie einfach Folgendes:

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

Dies ist auch eine Lösung für Drag & Drop. Also ich hoffe das hilft jemandem :)

In meinem Fall wurde das Problem nur in Internet Explorer reproduziert: Unabhängig davon, welches Element (Eingabe, Div usw.) über einen Tooltip verfügt, wird der angezeigte Tooltip weiterhin angezeigt.

Ich habe im Web einige Lösungen gefunden, die empfehlen, .hide () als QuickInfo für Elemente zu verwenden. Klicken Sie auf das Ereignis, aber es ist eine schlechte Idee, wenn Sie zum selben Element zurückkehren

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

hat die ganze Magie gemacht !!! - wobei .myToolTippedElement das Element ist, das einen Tooltip ofCourse hat ...

in eckig 7 mit bootstrap 4 und jquery habe ich das gefunden und es funktioniert gut. Ich habe dispose verwendet, weil es zerstört, den Tooltip nicht verbirgt.

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

Versuchen Sie es mit , rel="tooltip"anstatt data-toggle="tooltip"denen gearbeitet in meinem Fall. Ich habe data-toggle="tooltip"die Triggerbedingung als Schwebeflug verwendet und auch eingestellt, was in meinem Fall nicht funktioniert hat. Als ich meine Datenauswahl geändert habe, hat es funktioniert.

HTML Quelltext:

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

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

Dadurch wird der feststeckende Tooltip definitiv entfernt.

Davids Antwort oben hat geholfen, mein Problem zu beheben. Ich hatte sowohl Hover- als auch Click-Ereignis auf der Schaltfläche. Firefox auf MAC hat sich so verhalten, wie ich es wollte. Das heißt, Tooltip anzeigen, wenn Sie den Mauszeiger bewegen, Tooltip nicht zum Klicken anzeigen. Wenn ich in anderen Browsern und Betriebssystemen auf klicke, wird der Tooltip angezeigt und bleibt angezeigt. Auch wenn ich die Maus zum Schweben auf andere Tasten bewege. Das hatte ich:

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

Dies ist die Lösung:

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

Sie können auch hinzufügen:

onclick="this.blur()"

Arbeitslösung

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

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

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

Ich habe dieses Problem behoben, indem ich den Tooltip in der Klickereignisfunktion mit dem folgenden Code entfernt habe:

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

Ich verwende den Bootstrap-Tooltip in cycle.js und keiner der oben genannten Punkte hat bei mir funktioniert.

Ich musste das machen:

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

Das funktioniert bei mir:

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

});

Ich habe die Schaltfläche Speichern dynamisch deaktiviert, dann war das Problem.

Verwenden Sie diese Funktion in Ihrer Dokumentbereitschaftsfunktion

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

Diese Lösung hat bei mir funktioniert.

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

Geige

Ich habe die meisten der in den vorherigen Antworten angegebenen Lösungen ausprobiert, aber keine davon hat für mich funktioniert.

Mein Problem ist in DataTable. Der folgende Code funktioniert für mich.

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

Sie können auch unten Methode zu verstecken Tooltip verwenden mouseleave , wie folgt:

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

In meinem Fall war dies die Lösung:

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

Ich habe diese Regel aus den Bootstrap-Dokumenten nicht befolgt:

Tooltips müssen ausgeblendet werden, bevor die entsprechenden Elemente aus dem DOM entfernt wurden.

Dies ist auch im HTML erreichbar, indem Folgendes hinzugefügt wird:

 data-trigger="hover"

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

Sie können diesen Weg auch für alte Versionen verwenden, da die akzeptierte Antwort bei mir nicht funktioniert hat und ich diesen Code für mich selbst und seine Arbeit gut geschrieben habe.

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

Wenn jemand einen Tooltip einrichten möchte, der einige Zeit nach dem Klicken angezeigt wird, habe ich Folgendes getan:

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

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