Come associare i suggerimenti di Bootstrap di Twitter a elementi creati dinamicamente?

Sto usando le descrizioni dei bootstrap di Twitter con javascript come il seguente:

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

Il mio markup è simile al seguente:

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

Funziona bene, ma aggiungo <a>elementi in modo dinamico e le descrizioni dei comandi non vengono visualizzate per quegli elementi dinamici. So che è perché rilevo .tooltip () solo una volta quando il documento è finito caricato con la tipica $(document).ready(function()funzionalità jquery .

Come posso associarlo a elementi creati dinamicamente? Di solito lo farei tramite il metodo jquery live (). Tuttavia, qual è l'evento che utilizzo per associare? Non sono sicuro di come collegare il bootstrap .tooltip () con jquery .live ().

Ho trovato un modo per far funzionare questo è qualcosa del genere:

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

Funziona, ma sembra un po 'hacker. Sto anche chiamando la stessa identica linea .tooltip () nella chiamata $ (pronto). Quindi, gli elementi che esistono quando la pagina viene caricata per la prima volta e corrispondono a quel selettore finiscono due volte con la descrizione comando?

Non vedo alcun problema con questo approccio. Sto solo cercando una migliore pratica o comprensione del comportamento.

Prova questo:

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

Se hai più configurazioni di tooltip che vuoi inizializzare, questo funziona bene per me.

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

È quindi possibile impostare la proprietà su singoli elementi utilizzando gli dataattributi.

Per me, solo catturare l'evento mouseenter era un po 'difettoso e la descrizione comandi non veniva mostrata / nascosta correttamente. Ho dovuto scrivere questo, e ora funziona perfettamente:

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

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

Ho pubblicato una risposta più lunga qui: https://stackoverflow.com/a/20877657/207661

TL; DR: è necessaria solo una riga di codice che viene eseguita nell'evento pronto per il documento:

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

Non sembra necessario altro codice più complicato suggerito in altre risposte (l'ho provato con Bootstrap 3.0).

Per me, questo js riproduce lo stesso problema che si verifica con Paola

La mia soluzione:

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

Invece di cercarlo in tutto il corpo. Si potrebbe semplicemente usare l'opzione del titolo dinamico già disponibile in tali scenari penso:

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

Ho trovato una combinazione di queste risposte che mi ha dato il miglior risultato, permettendomi di posizionare ancora la descrizione comando e collegarla al contenitore pertinente:

$('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 pertinente:

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