如何将 Twitter Bootstrap 工具提示绑定到动态创建的元素？
我正在使用带有 javascript 的 Twitter 引导工具提示，如下所示：
$('a[rel=tooltip]').tooltip();
我的标记如下所示：
<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>
这很好用，但我动态添加了 <a> 元素，并且工具提示没有为这些动态元素显示。我知道这是因为我只在使用典型的 jquery $(document).ready(function() 功能完成加载文档时绑定 .tooltip() 一次。
如何将其绑定到动态创建的元素？通常我会通过 jquery live() 方法来做到这一点。但是，我用来绑定的事件是什么？我只是不确定如何将引导程序 .tooltip() 与 jquery .live() 连接起来。
我发现一种方法可以使这项工作是这样的：
/* 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();
});
这可行，但似乎有点骇人听闻。我还在 $(ready) 调用中调用了完全相同的 .tooltip() 行。那么，页面第一次加载并匹配该选择器时存在的元素是否最终会出现两次工具提示？
我认为这种方法没有任何问题。我只是在寻找最佳实践或对行为的理解。
rel 属性的方式很糟糕。这是非语义的，并且起源于十多年前作为黑客。如今，几年前的每个浏览器都支持 data-* 属性，没有更多理由不使用它们。
试试这个：
$('body').tooltip({
selector: '[rel=tooltip]'
});
如果您有多个要初始化的工具提示配置，这对我来说很有效。
$("body").tooltip({
selector: '[data-toggle="tooltip"]'
});
然后，您可以使用 data 属性在单个元素上设置属性。
对我来说，只捕获 mouseenter 事件有点麻烦，并且工具提示没有正确显示/隐藏。我不得不写这个，现在它工作得很好：
$(document).on('mouseenter','[rel=tooltip]', function(){
$(this).tooltip('show');
});
$(document).on('mouseleave','[rel=tooltip]', function(){
$(this).tooltip('hide');
});
我在这里发布了更长的答案：https://stackoverflow.com/a/20877657/207661
TL;DR：您只需要在文档就绪事件中运行的一行代码：
$(document.body).tooltip({ selector: "[title]" });
其他答案中建议的其他更复杂的代码似乎没有必要（我已经用 Bootstrap 3.0 对此进行了测试）。
对我来说，这个 js 重现了与 Paola 发生的相同问题
我的解决方案：
$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
$(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});
而不是在全文中搜索它。我认为可以只使用在这种情况下已经可用的动态标题选项：
$btn.tooltip({
title: function(){
return $(this).attr('title');
}
});
我发现这些答案的组合给了我最好的结果 - 允许我仍然定位工具提示并将其附加到相关容器：
$('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：
<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
<i class="icon-some-icon"></i>
</button>
在不使用 jQuery 的 Bootstrap 5 中，您可以这样做：
const btn = document.createElement('button'); btn.innerHTML = '点击我'; btn.dataset['toggle'] = '工具提示'; btn.dataset['placement'] = 'top'; btn.title = '你的工具提示在这里';新的引导程序。工具提示（btn）； document.getElementById('parent').appendChild(btn);
