Wie binde ich Twitter Bootstrap-Tooltips an dynamisch erstellte Elemente?

Ich verwende Twitter-Bootstrap-Tooltips mit Javascript wie folgt:

$('a[rel=tooltip]').tooltip();

Mein Markup sieht folgendermaßen aus:

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

Dies funktioniert gut, aber ich füge <a>Elemente dynamisch hinzu und die QuickInfos werden für diese dynamischen Elemente nicht angezeigt. Ich weiß, dass ich .tooltip () nur einmal binde, wenn das Dokument mit der typischen jquery- $(document).ready(function()Funktionalität geladen ist.

Wie kann ich dies an dynamisch erstellte Elemente binden? Normalerweise würde ich dies über die Methode jquery live () tun. Was ist jedoch das Ereignis, das ich zum Binden verwende? Ich bin mir nur nicht sicher, wie ich den Bootstrap .tooltip () mit jquery .live () verbinden soll.

Ich habe einen Weg gefunden, diese Arbeit so zu machen:

/* Add new 'rows' when plus sign is clicked */
$("a.add").live('click', function () {
    var clicked_li = $(this).parent('li');
    var clone = clicked_li.clone();

    clone.find(':input').each(function() {
        $(this).val('');
    });

    clicked_li.after(clone);
    $('a[rel=tooltip]').tooltip();
});

Das funktioniert, scheint aber irgendwie hackisch. Ich rufe auch genau dieselbe .tooltip () -Zeile im $ (ready) -Aufruf auf. Werden die Elemente, die beim ersten Laden der Seite vorhanden sind und mit diesem Selektor übereinstimmen, zweimal mit dem Tooltip angezeigt?

Ich sehe keine Probleme mit diesem Ansatz. Ich bin nur auf der Suche nach einer Best Practice oder einem Verständnis des Verhaltens.

Probier diese:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

Wenn Sie mehrere Tooltip-Konfigurationen haben, die Sie initialisieren möchten, funktioniert dies gut für mich.

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

Anschließend können Sie die Eigenschaft für einzelne Elemente mithilfe von dataAttributen festlegen .

Für mich war es ein bisschen fehlerhaft, nur das Mouseenter-Ereignis zu erfassen, und der Tooltip wurde nicht richtig angezeigt / ausgeblendet. Ich musste das schreiben und es funktioniert jetzt perfekt:

$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});

Ich habe hier eine längere Antwort gepostet: https://stackoverflow.com/a/20877657/207661

TL; DR: Sie benötigen nur eine Codezeile, die im dokumentenbereiten Ereignis ausgeführt wird:

$(document.body).tooltip({ selector: "[title]" });

Anderer komplizierterer Code, der in anderen Antworten vorgeschlagen wird, scheint nicht notwendig zu sein (ich habe dies mit Bootstrap 3.0 getestet).

Für mich gibt dies das gleiche Problem wieder, das bei Paola auftritt

Meine Lösung:

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});

Anstatt es im ganzen Körper zu suchen. Man könnte einfach die dynamische Titeloption verwenden, die in solchen Szenarien bereits verfügbar ist, denke ich:

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

Ich fand, dass eine Kombination dieser Antworten das beste Ergebnis lieferte - so konnte ich den Tooltip weiterhin positionieren und an den entsprechenden Container anhängen:

$('body').on('mouseenter', '[rel=tooltip]', function(){
  var el = $(this);
  if (el.data('tooltip') === undefined) {
    el.tooltip({
      placement: el.data("placement") || "top",
      container: el.data("container") || false
    });
  }
  el.tooltip('show');
});

$('body').on('mouseleave', '[rel=tooltip]', function(){
  $(this).tooltip('hide');
});

Relevantes HTML:

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>