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

115

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.

SilentCry
quelle
In meiner Frage funktioniert es auch nicht im Link. Schauen wir uns das an. Es gibt das gleiche Problem.
SilentCry

Antworten:

241

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/

davidkonrad
quelle
1
Danke David, das funktioniert wirklich. Ich habe die Triggeroption für den Tooltip zuletzt falsch verstanden, jetzt habe ich recht.
SilentCry
1
@SilentCry Denken Sie daran, wen Sie ansprechen. Das Auslösen eines "Hovers" ist möglicherweise nicht immer einfach / häufig.
Phk
3
@davidkonrad Mobile Plattformen, blinde Benutzer. Könnte auch erklären, warum sie "Hover Focus" als Standard festlegen.
Phk
2
@phk, Bootstrap hat ein allgemeines Problem, da es nicht zuerst mobil ist. In Bezug auf Blinde sollten wir Arienattribute verwenden. Es gibt übrigens ein großartiges Tool zum Testen der Benutzerfreundlichkeit, das für die kanadischen Behörden mit mehreren "Ebenen" entwickelt wurde, die Sie erfüllen können -> achecker.ca/checker/index.php Mein Land hat diese Standards nicht, aber es lohnt sich, sie einzuhalten wie auch immer.
Davidkonrad
1
Vielleicht möchten Sie einen Blick auf die Antwort von Karmonik Cola unten werfen. Der Tooltip wird weiterhin im Fokus angezeigt.
David Stosik
61

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.

Nitai
quelle
1
Dies muss die akzeptierte Antwort sein und sollte auch in die Bootstrap-Codebasis implementiert werden.
kjdion84
5
Dies war äußerst hilfreich für Bootstrap-Tooltips, die auf Schaltflächen mit dem Auslöser "Hover" platziert wurden und asynchrone Postbacks verursachen (dh modale Anzeigefelder anzeigen). Ohne dies führt das Postback vom Tastendruck dazu, dass der Tooltip "hängen bleibt" und niemals verschwindet.
Bradykey
1
In meinem Fall habe ich die Senden-Schaltfläche deaktiviert, während eine Ajax-Aktion ausgeführt wurde. Während der Ajax-Prozess ausgeführt wurde, blieb der Tooltip erhalten, da die Schaltfläche deaktiviert wurde. Sobald der Ajax-Prozess abgeschlossen ist, wird die Schaltfläche wieder "verfügbar". Wenn Sie die Taste ein- und ausschalten, wird der Tooltip geschlossen. Nitais Lösung hat alles repariert. Der Tooltip wird jetzt beim Klicken ausgeblendet und funktioniert immer noch beim Schweben, sobald die Schaltfläche wieder aktiv wird.
HPWD
Ich stimme @ kjdion84 zu. Ich habe gekämpft, bis ich das gefunden habe
Ahmad
9

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

Nienormalny_
quelle
Ich hatte das Problem nur mit den Rastertasten von Telerik Kendo. Wenn ich auf einen klickte, wurde der Tooltiip nicht ausgeblendet. Das hat es gelöst!
John81
8

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

Kamornik Cola
quelle
Funktioniert auch für mich und hat gegenüber der akzeptierten Lösung den Vorteil, dass der Tooltip weiterhin im Fokus angezeigt wird.
David Stosik
3

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

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.

Jestino Sam
quelle
2

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

Sie können auch hinzufügen:

onclick="this.blur()"
Sergey Koshkin
quelle
1
Wie unterscheidet sich dies von dem, was Kamornik Cola vorgeschlagen hat (mit Ausnahme der Implementierung ohne jQuery)? Ich schlage vor, eine Erklärung hinzuzufügen, damit die Antwort hilfreich ist.
Viele
2

Arbeitslösung

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

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

},500);    // Hides tooltip in 500 milliseconds
    });
Alpha
quelle
Während dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
Adam
@Adam Ich konnte in den Foren keine funktionierenden Lösungen finden, um einen Tooltip auszublenden, nachdem ich auf <a>, <Button> oder andere Elemente geklickt habe, denen Schaltflächenfunktionen oder das Erscheinungsbild zugeordnet sind.
Alpha
1

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();
});
Soroxis
quelle
1
Können Sie den Tooltip beim Hover erneut abrufen?
Vishnu
0

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');
}
Brian C.
quelle
0

Das funktioniert bei mir:

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

});

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

Devendra Singraul
quelle
Hier speichern ist ID meines Buttons
Devendra Singraul
0

Verwenden Sie diese Funktion in Ihrer Dokumentbereitschaftsfunktion

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

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.

طلحة
quelle
0

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

WARUM
quelle
0

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

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

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.

Gabi L.
quelle
0

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>
csharpsql
quelle
Leider funktioniert das nicht und der Tooltip steckt immer noch fest.
Fwd079
0

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');
});
Goldene Garde
quelle
0

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