Como vincular as dicas de ferramentas do Twitter Bootstrap a elementos criados dinamicamente?

Estou usando as dicas de ferramentas de auto-inicialização do Twitter com javascript, da seguinte maneira:

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

Minha marcação é assim:

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

Isso funciona bem, mas adiciono <a>elementos dinamicamente e as dicas de ferramentas não estão aparecendo para esses elementos dinâmicos. Eu sei que é porque eu só vinculo .tooltip () uma vez quando o documento é carregado com a $(document).ready(function()funcionalidade jquery típica .

Como vincular isso a elementos criados dinamicamente? Normalmente, eu faria isso através do método jquery live (). No entanto, qual é o evento que eu uso para ligar? Só não sei como conectar o bootstrap .tooltip () ao jquery .live ().

Eu encontrei uma maneira de fazer isso funcionar é algo como isto:

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

Isso funciona, mas parece meio tolo. Também estou chamando exatamente a mesma linha .tooltip () na chamada $ (ready). Então, os elementos que existem quando a página é carregada pela primeira vez e correspondem a esse seletor terminam com a dica de ferramenta duas vezes?

Não vejo problemas com essa abordagem. Estou apenas procurando uma melhor prática ou compreensão do comportamento.

Tente este:

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

Se você tiver várias configurações de dicas de ferramentas que deseja inicializar, isso funcionará bem para mim.

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

Você pode definir a propriedade em elementos individuais usando dataatributos.

Para mim, apenas capturar o evento do mouseenter era um pouco complicado, e a dica de ferramenta não estava aparecendo / ocultando corretamente. Eu tive que escrever isso, e agora está funcionando perfeitamente:

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

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

Publiquei uma resposta mais longa aqui: https://stackoverflow.com/a/20877657/207661

TL; DR: você precisa de apenas uma linha de código que é executada no evento pronto para documento:

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

Outro código mais complicado sugerido em outras respostas não parece necessário (eu testei isso com o Bootstrap 3.0).

Para mim, esse js reproduz o mesmo problema que acontece com Paola

Minha solução:

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

Em vez de procurá-lo em corpo inteiro. Pode-se usar a opção de título dinâmico já disponível em tais cenários, eu acho:

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

Descobri que uma combinação dessas respostas me deu o melhor resultado - permitindo que eu ainda posicione a dica e a anexe ao contêiner relevante:

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

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