Como faço para vincular as dicas de ferramentas do Twitter Bootstrap a elementos criados dinamicamente?

Estou usando as dicas de ferramentas de boot do Twitter com javascript como as seguintes:

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

Minha marcação é assim:

  

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

Como posso 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 vincular? Eu só não sei como ligar o bootstrap .tooltip () com jquery .live ().

Eu encontrei uma maneira de fazer este trabalho é algo assim:

 /* 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 um pouco hackish. Também estou chamando a mesma linha .tooltip () na chamada $ (pronta). Então, os elementos que existem quando a página é carregada pela primeira vez e combinam com esse seletor, terminam com a dica de ferramenta duas vezes?

Eu não vejo nenhum problema com essa abordagem. Eu só estou procurando uma melhor prática ou compreensão do comportamento.

Tente este:

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

Se você tem várias configurações de dica de ferramenta que deseja inicializar, isso funciona bem para mim.

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

Você pode então definir a propriedade em elementos individuais usando atributos de data .

Para mim, apenas pegar o evento mouseenter foi um pouco buggy, ea dica não estava mostrando / escondendo 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'); }); 

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

TL; DR: Você precisa apenas de uma linha de código que seja 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, isso 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'); }); 

Eu descobri que uma combinação dessas respostas me deu o melhor resultado – permitindo-me ainda posicionar a dica de ferramenta e anexá-la 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:

  

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

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