twitter-bootstrap - 引导工具提示和弹出框冲突

Question

我有一个表单，其中通过 Javscript 附加了引导工具提示。这些元素具有 HTML 标题属性（就像在 bootstrap 示例中一样），并且表单中的元素也有使用 HTML 添加的弹出框。

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

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

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

Answer 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 将标题和数据原始标题属性添加到您的元素，并且提示或弹出框将查找它们以获取它们的信息，因为它们是空什么都不会显示。