Bagaimana cara saya mengikat tooltip Bootstrap Twitter ke elemen yang dibuat secara dinamis?

Saya menggunakan tooltips bootstrap Twitter dengan javascript seperti berikut:

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

Markup saya terlihat seperti ini:

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

Ini berfungsi dengan baik, tapi saya menambahkan <a>elemen secara dinamis dan tooltips tidak muncul untuk elemen dinamis tersebut. Saya tahu itu karena saya hanya mengikat .tooltip () sekali ketika dokumen selesai dimuat dengan $(document).ready(function()fungsi jquery yang khas .

Bagaimana saya bisa mengikat ini ke elemen yang dibuat secara dinamis? Biasanya saya akan melakukan ini melalui metode jquery live (). Namun, acara apa yang saya gunakan untuk mengikat? Saya tidak yakin bagaimana cara menghubungkan bootstrap .tooltip () dengan jquery .live ().

Saya telah menemukan satu cara untuk membuat pekerjaan ini adalah sesuatu seperti ini:

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

Ini berfungsi, tetapi sepertinya agak retas. Saya juga menelepon baris .tooltip () yang sama persis dalam panggilan $ (siap). Jadi, apakah elemen yang ada saat halaman pertama dimuat dan cocok dengan pemilih itu berakhir dengan tooltip dua kali?

Saya tidak melihat masalah dengan pendekatan ini. Saya hanya mencari praktik terbaik atau pemahaman perilaku.

Coba yang ini:

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

Jika Anda memiliki beberapa konfigurasi tooltip yang ingin Anda inisialisasi, ini berfungsi baik untuk saya.

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

Anda kemudian dapat mengatur properti pada elemen individual menggunakan dataatribut.

Bagi saya, hanya menangkap acara mouseenter agak buggy, dan tooltip tidak menunjukkan / bersembunyi dengan baik. Saya harus menulis ini, dan sekarang berfungsi dengan baik:

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

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

Saya sudah mengirimkan jawaban yang lebih lama di sini: https://stackoverflow.com/a/20877657/207661

TL; DR: Anda hanya perlu satu baris kode yang berjalan di acara siap dokumen:

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

Kode lain yang lebih rumit yang disarankan dalam jawaban lain sepertinya tidak perlu (Saya sudah menguji ini dengan Bootstrap 3.0).

Bagi saya, js ini mereproduksi masalah yang sama yang terjadi dengan Paola

Solusi saya:

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

Alih-alih mencarinya di Tubuh penuh. Orang hanya bisa menggunakan opsi judul dinamis yang sudah tersedia dalam skenario seperti itu saya pikir:

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

Saya menemukan kombinasi dari jawaban-jawaban ini memberi saya hasil terbaik - memungkinkan saya untuk tetap menempatkan tooltip dan menempelkannya ke wadah yang relevan:

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

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