如何将Twitter引导工具提示绑定到动态创建的元素?

我使用Twitter引导工具提示与javascript如下:

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

我的加价是这样的:

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

这很好，但我动态添加<a>元素，这些动态元素的工具提示没有显示出来。我知道这是因为我只绑定.tooltip()一次当文档完成加载典型的jquery $(document).ready(function()功能。

如何将其绑定到动态创建的元素?通常我会通过jquery live()方法来做到这一点。但是，我用来绑定的事件是什么?我只是不确定如何将bootstrap .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()行。那么，当页面第一次加载并匹配该选择器时存在的元素是否会两次出现在工具提示中?

我认为这种方法没有任何问题。我只是在寻找对行为的最佳实践或理解。

121732 次浏览
小开
最佳答案

试试这个:

$('body').tooltip({
selector: '[rel=tooltip]'
});
小开
对我来说，只捕捉mouseenter事件有点bug，工具提示没有正确显示/隐藏。 我必须这样写，现在它工作得很完美:

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


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

对我来说，这个js重现了与Paola发生的相同问题

我的解决方案:

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

我发现这些答案的组合给了我最好的结果-允许我仍然定位工具提示，并将其附加到相关的容器:

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

如果你想初始化多个工具提示配置，这对我来说很好。

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

然后，可以使用data属性在各个元素上设置该属性。

小开

我在这里发布了更长的答案:https://stackoverflow.com/a/20877657/207661

TL;DR:你只需要在document ready event中运行一行代码:

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

在其他答案中建议的其他更复杂的代码似乎没有必要(我已经用Bootstrap 3.0测试了它)。

小开

而不是在完整的身体搜索它。 在这种情况下，我认为可以使用动态标题选项:

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

在Bootstrap 5中，它不使用jQuery，你可以这样做:

const btn = document.createElement('button');
btn.innerHTML = 'Click me';
btn.dataset['toggle'] = 'tooltip';
btn.dataset['placement'] = 'top';
btn.title = 'Your Tooltip Here';
new bootstrap.Tooltip(btn);


document.getElementById('parent').appendChild(btn);
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy" crossorigin="anonymous"></script>
<div id="parent"></div>


提交答案