Làm thế nào để ràng buộc tooltip bootstrap vào các yếu tố năng động

Question

Khi sử dụng tooltip Bootstrap, chúng tôi cần phải viết một cái gì đó như thế này để có chức năng tooltip:

$(".showtooltip").tooltip(); 

Nhưng vấn đề là, chúng ta cần phải chạy lại mã mà mỗi khi mới nội dung được tải qua ajax. Có cách nào để chạy mã một lần và tự động áp dụng chú giải công cụ khi phần tử mới được tải không?

Cảm ơn bạn.

Answer 1

Bạn cần sử dụng thuộc tính selector. Xem trên documentation:

"Nếu một chọn được cung cấp, các đối tượng tooltip sẽ được giao cho mục tiêu cụ thể Trong thực tế, điều này được sử dụng để kích hoạt tính năng HTML động nội dung có tooltips thêm See.. this và informative example. "

JS mã ví dụ:

$('body').tooltip({ 
    selector: '.createdDiv' 
}); 

$('#add-button').click(function() { 
    $('<div class="createdDiv" data-toggle="tooltip" title="Some tooltip text!">Hover over me</div>').appendTo('#container'); 
}); 

DEMO

Answer 2

Hãy thử điều này:

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