Làm cách nào để liên kết các công cụ Twitter Bootstrap với các yếu tố được tạo động?

Tôi đang sử dụng các chú giải công cụ bootstrap của Twitter với javascript như sau:

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

Đánh dấu của tôi trông như thế này:

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

Điều này hoạt động tốt, nhưng tôi thêm <a>các phần tử một cách linh hoạt và các chú giải công cụ không hiển thị cho các phần tử động đó. Tôi biết điều đó bởi vì tôi chỉ liên kết .tooltip () một lần khi tài liệu được tải xong với $(document).ready(function()chức năng jquery điển hình .

Làm thế nào tôi có thể liên kết này với các yếu tố được tạo động? Thông thường tôi sẽ làm điều này thông qua phương thức jquery live (). Tuy nhiên, sự kiện mà tôi sử dụng để ràng buộc là gì? Tôi chỉ không chắc chắn làm thế nào để kết nối bootstrap .tooltip () với jquery .live ().

Tôi đã tìm thấy một cách để làm cho công việc này là như thế này:

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

Điều này hoạt động, nhưng có vẻ như loại hackish. Tôi cũng đang gọi chính xác dòng .tooltip () trong lệnh gọi $ (sẵn sàng). Vì vậy, các yếu tố tồn tại khi trang tải lần đầu tiên và khớp với bộ chọn đó kết thúc với tooltip hai lần?

Tôi không thấy bất kỳ vấn đề với phương pháp này. Tôi chỉ đang tìm kiếm một thực tiễn tốt nhất hoặc sự hiểu biết về hành vi.

Hãy thử cái này:

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

Nếu bạn có nhiều cấu hình tooltip mà bạn muốn khởi tạo, điều này hoạt động tốt với tôi.

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

Sau đó, bạn có thể đặt thuộc tính trên các thành phần riêng lẻ bằng datacác thuộc tính.

Đối với tôi, chỉ bắt sự kiện mouseenter là một lỗi nhỏ và tooltip không hiển thị / ẩn đúng cách. Tôi đã phải viết cái này và nó đang hoạt động hoàn hảo:

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

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

Tôi đã đăng câu trả lời dài hơn tại đây: https://stackoverflow.com/a/20877657/207661

TL; DR: Bạn chỉ cần một dòng mã chạy trong sự kiện sẵn sàng tài liệu:

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

Mã phức tạp khác được đề xuất trong các câu trả lời khác dường như không cần thiết (Tôi đã thử nghiệm điều này với Bootstrap 3.0).

Đối với tôi, js này tái tạo cùng một vấn đề xảy ra với Paola

Giải pháp của tôi:

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

Thay vì tìm kiếm nó trong toàn bộ cơ thể. Người ta chỉ có thể sử dụng tùy chọn tiêu đề động đã có sẵn trong các tình huống như vậy tôi nghĩ:

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

Tôi đã tìm thấy một sự kết hợp của những câu trả lời này cho tôi kết quả tốt nhất - cho phép tôi vẫn định vị được chú giải công cụ và gắn nó vào thùng chứa có liên quan:

$('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 có liên quan:

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