Comment lier des info-bulles Twitter Bootstrap à des éléments créés dynamiquement?

J'utilise des info-bulles d'amorçage Twitter avec javascript comme suit:

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

Mon balisage ressemble à ceci:

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

Cela fonctionne bien, mais j'ajoute des <a>éléments dynamiquement et les info-bulles ne s'affichent pas pour ces éléments dynamiques. Je sais que c'est parce que je ne lie .tooltip () qu'une seule fois lorsque le document est terminé chargé avec la $(document).ready(function()fonctionnalité jquery typique .

Comment puis-je le lier à des éléments créés dynamiquement? Habituellement, je le fais via la méthode jquery live (). Cependant, quel est l'événement que j'utilise pour lier? Je ne sais pas comment connecter le bootstrap .tooltip () avec jquery .live ().

J'ai trouvé une façon de faire fonctionner ça, c'est quelque chose comme ça:

/* 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();
});

Cela fonctionne, mais semble un peu hackish. J'appelle également exactement la même ligne .tooltip () dans l'appel $ (ready). Ainsi, les éléments qui existent lorsque la page se charge pour la première fois et correspondent à ce sélecteur se retrouvent-ils deux fois avec l'info-bulle?

Je ne vois aucun problème avec cette approche. Je cherche juste une meilleure pratique ou une compréhension du comportement.

Essaye celui-là:

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

Si vous souhaitez initialiser plusieurs configurations d'infobulles, cela fonctionne bien pour moi.

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

Vous pouvez ensuite définir la propriété sur des éléments individuels à l'aide d' dataattributs.

Pour moi, attraper uniquement l'événement mouseenter était un peu bogué et l'info-bulle ne s'affichait pas / ne se cachait pas correctement. J'ai dû écrire ceci, et cela fonctionne maintenant parfaitement:

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

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

J'ai posté une réponse plus longue ici: https://stackoverflow.com/a/20877657/207661

TL; DR: Vous n'avez besoin que d'une seule ligne de code qui s'exécute dans un événement prêt pour le document:

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

D'autres codes plus compliqués suggérés dans d'autres réponses ne semblent pas nécessaires (j'ai testé cela avec Bootstrap 3.0).

Pour moi, ce js reproduit le même problème qui se produit avec Paola

Ma solution:

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

Plutôt que de le rechercher dans tout le corps. On pourrait simplement utiliser l'option de titre dynamique déjà disponible dans de tels scénarios, je pense:

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

J'ai trouvé qu'une combinaison de ces réponses m'a donné le meilleur résultat - me permettant de toujours positionner l'infobulle et de la fixer au conteneur correspondant:

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

HTML pertinent:

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