web-dev-qa-db-fra.com

Comment lier les info-bulles Twitter Bootstrap _ aux éléments créés dynamiquement?

J'utilise Twitter bootstrap info-bulles avec du 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 <a> de manière dynamique et les info-bulles ne s'affichent pas pour ces éléments dynamiques. Je sais que c’est parce que je lie seulement .tooltip () une fois le document chargé avec la fonctionnalité typique jquery $(document).ready(function().

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

J'ai trouvé une façon de faire ce travail 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 bidon. J'appelle également la même ligne .tooltip () exacte dans l'appel $ (ready). Alors, les éléments qui existent lors du premier chargement de la page et qui correspondent à ce sélecteur se retrouvent-ils deux fois avec l'info-bulle?

Je ne vois pas de problèmes avec cette approche. Je cherche simplement une meilleure pratique ou une compréhension du comportement.

jquerytwitter-bootstrap
257
durden2.0

Essaye celui-là:

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

Si vous souhaitez initialiser plusieurs configurations d'info-bulle, cela me convient parfaitement.

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

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

131
rohitmishra

Pour moi, seulement attraper l'événement mouseenter était un peu bogué et l'info-bulle ne s'affichait pas correctement. Je devais écrire cela et cela fonctionne maintenant parfaitement:

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

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

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

TL; DR: vous n'avez besoin que d'une ligne de code qui s'exécute dans l'é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 déjà testé cela avec Bootstrap 3.0).

15
Shital Shah

Pour moi, ce js reproduit le même problème que celui rencontré avec Paola

Ma solution:

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

Plutôt que de le chercher en entier. 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');
  }
});
2
Jaskaran Singh

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

$('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>
1
mattgi