So binden Sie den Bootstrap-Tooltip an dynamische Elemente

Wenn Sie den Bootstrap-Tooltip verwenden, müssen wir so etwas schreiben, um die Tooltip-Funktionalität zu haben:

$(".showtooltip").tooltip();

Aber das Problem ist, dass wir diesen Code jedes Mal erneut ausführen müssen, wenn neuer Inhalt über Ajax geladen wird. Gibt es eine Möglichkeit, den Code einmal auszuführen und den Tooltip automatisch anzuwenden, wenn ein neues Element geladen wird?

Vielen Dank.

Sie müssen verwenden selector Eigentum. Siehe auf der Dokumentation :

“Wenn ein Selektor bereitgestellt wird, werden QuickInfo-Objekte an die angegebenen Ziele delegiert. In der Praxis wird dies verwendet, um zu ermöglichen, dass QuickInfos zu dynamischen HTML-Inhalten hinzugefügt werden. Siehe Dies und ein informatives Beispiel.”

JS-Beispielcode:

$('body').tooltip({
    selector: '.createdDiv'
});

$('#add-button').click(function() {
    $('<div class="createdDiv" data-toggle="tooltip" title="Some tooltip text!">Hover over me</div>').appendTo('#container');
});

DEMO

Versuche dies:

$('body').tooltip({
    selector: '[data-toggle="tooltip"]'
});

Bootstrap 4:

$(document).tooltip({selector: '[data-toggle="tooltip"]'});

$(document).popover({selector: '[data-toggle="popover"]'});

<= Bootstrap v5.x, tooltip() existiert nicht im JQuery-Objekt.

Also kam ich auf diese selbstgemachte Lösung.

Ich weiß nicht wirklich über Leistungsprobleme oder eine bessere Problemumgehung Bescheid.

Wenn es also eine bessere Lösung dafür gibt, lassen Sie es mich einfach in den Kommentaren wissen, damit ich meine Antwort entferne oder aktualisiere.

Hier ist, was ich getan habe und für mich funktioniert:

var body = $('body');
body.on('mouseover', '[data-bs-toggle="tooltip"]', function () {
    return new bootstrap.Tooltip(this).show();
});

body.on('mouseleave', '[data-bs-toggle="tooltip"]', function () {
    $('[role="tooltip"]').fadeOut(function () {
        $(this).remove();
    });
});