如何在动态元素上绑定引导工具提示 [英] How to bind bootstrap tooltip on dynamic elements

问题描述

在使用Bootstrap工具提示时，我们需要编写以下内容以具有工具提示功能:

When using Bootstrap tooltip, we need to write something like this to have tooltip functionality:

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

但是问题是，每次通过ajax加载新内容时，我们都需要重新运行该代码.无论如何，是否有一次可以运行代码并在加载新元素时自动应用工具提示?

But the problem is, we need to rerun that code every time when new content is loaded via ajax. Is there anyway to run the code for once and auto apply the tooltip when new element is loaded?

谢谢.

推荐答案

您需要使用selector属性. 请参见 文档 :

You need to use selector property. See on the documentation :

如果提供了选择器，则工具提示对象将委派给 指定的目标.实际上，这用于启用动态HTML 内容中添加了工具提示.参见此和信息 例如."

"If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See this and an informative example."

JS示例代码:

$('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

这篇关于如何在动态元素上绑定引导工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！