Prototype、jQuery 和 Bootstrap 导致工具提示元素在鼠标移出时隐藏答案

【问题标题】：Prototype, jQuery and Bootstrap cause tooltip elements to be hidden on mouse outPrototype、jQuery 和 Bootstrap 导致工具提示元素在鼠标移出时隐藏
【发布时间】：2014-05-08 22:52:40
【问题描述】：

我一直在使用 Prototype、jQuery 和 Bootstrap 开发一个项目。我们在 UI 中使用 Bootstrap Tooltips，通常在图标和文本上，如下所示：

<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Some tooltip"></span>

<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Another tooltip"></span>

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Link tooltip">Link tooltip</a>

然后我们使用一些简单的 Javascript 来激活我们的工具提示：

var _j = jQuery.noConflict();
_j("[data-toggle=\"tooltip\"]").tooltip();

我正在使用 jQuery 的 _j 别名，因为 Prototype 使用了 $ 前缀。这很好用，但是一旦您将鼠标从工具提示元素上移开，它就会应用style="display: hidden;。我无法做出任何合理的解释，所以想知道是否有人有任何想法？

Here is a jsFiddle.

【问题讨论】：

确保 Prototype 在 jQuery 和 jQuery.noConflict() 之前加载。他们必须按照这个顺序。您的小提琴以不同的顺序排列它们，但我对小提琴的了解还不够，无法确定是否可以改变。如果我完全删除 Prototype 框架，你的小提琴确实有效。
看看我对另一个类似问题的回答。 stackoverflow.com/a/15095654/341491

标签： javascript jquery twitter-bootstrap prototypejs

【解决方案1】：

用这个技巧解决问题：

$('.tooltips').tooltip().on('hidden.bs.tooltip', function(){
     jQuery(this).show();
});

【讨论】：

【解决方案2】：

您可以在 CSS 文件中使用 display:block !important。这样做，它会强制元素显示，即使脚本告诉他们隐藏。

【讨论】：