jquery - with - twitter card video




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

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:

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

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

$('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 elementos <a> dinamicamente e as dicas não estão aparecendo para esses elementos dinâmicos. 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 o seletor, terminam com a dica de ferramenta duas vezes?

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


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

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

Para mim, apenas pegar o evento mouseenter foi um pouco buggy, e a 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');
});

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

Tente este:

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






twitter-bootstrap