引导工具提示和弹出框冲突答案

【问题标题】：Bootstrap tooltip and popover clashes引导工具提示和弹出框冲突
【发布时间】：2013-03-24 07:22:39
【问题描述】：

我有一个表单，其中引导工具提示通过 Javscript 附加。这些元素具有 HTML 标题属性 (just like in the bootstrap example)，并且表单中的元素也有使用 HTML 添加的弹出框。

由于某种原因，工具提示出现在我没有初始化它的元素上 - 这意味着我的弹出框和工具提示之间存在冲突。

我曾尝试使用不同的标签，如 <span> <div> 和 <button> 以防止冲突，但我的弹出框和工具提示继续同时显示。

任何想法为什么会发生这种情况？

【问题讨论】：

您能否提供一个用于初始化插件的各个选择器的示例？
我相信我们可以帮助您，但请添加您的代码！

标签： twitter-bootstrap twitter-bootstrap-rails

【解决方案1】：

我遇到了类似的问题，虽然我还没有找出问题的根源（我确信我做了一些愚蠢的事情），但我能够找到解决问题的解决方法。

您需要使用 Bootstrap 的默认选择器和标题属性以外的其他内容来初始化工具提示或弹出框。

所以不是这个...

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

<span data-toggle="tooltip" title="My Title" data-placement="top"></span>

这样做...

$('body').tooltip({
            container: 'body',
            selector: '.bs-tooltip',
            title : function () {
               return $(this).attr('tooltip-title');
            }
        });

<span class="bs-tooltip" tooltip-title="My Title" data-placement="top"></span>

只需确保同时更改选择器和标题即可。仅更改标题不会纠正冲突，仅更改选择器将导致 Bootstrap 将标题和数据原始标题属性添加到您的元素，并且提示或弹出框将向它们查找信息，因为它们是空的什么都不会显示。

【讨论】：