我已经安装了Bootstrap,需要一些JavaScript / jQuery部分的帮助。
我的HTML看起来像这样:
<a href="#" data-toggle="tooltip" title="Some tooltip text!">?</a>
<!-- Generated markup by the plugin -->
<div class="tooltip top">
<div class="tooltip-inner">Some tooltip text!</div>
<div class="tooltip-arrow"></div>
</div>
我的JavaScript:
<script type="text/javascript">
jQuery(function ($) {
$("a").tooltip()
});
</script>
工具提示就像它应该悬停一样工作,然而,在移出元素后,整个元素消失。基本上你只能在它上面悬停一次然后a
标签设置为display:none;
。这是为什么?
我想通了。我看到很多人都面临这个问题,所以也许会有所帮助。
我只是下载了最新的jquery-1.11.1.min.js
并安装了它。这样做之后,现在工作正常。
这已经很老了,但我今天在一个网站上遇到了它,所以我会回答,以防它最终对其他人有帮助...
如果你在网站上加载了prototype.js,那么prototype adds a .hide()
method to elements:
function hide(element) {
element = $(element);
element.style.display = 'none';
return element;
}
jquery触发器方法qazxsw poi并调用它来宣布工具提示已被隐藏:
mistakes this for an event emitter
...从而隐藏了工具提示所附着的元素。
最好的解决方法是停止使用prototype.js,它以与现代标准不兼容的方式扩展DOM。
第二个最好的修复,如果你不能杀死prototype.js,是为了避免使用bootstrap工具提示。浏览器工具提示工作得很好。
如果你真的需要两者,你可以使用bootstrap的elem[ type ]();
来改变hide事件的名称(以及你在那里时的show事件):
tooltips.js
或者你可以修补它:
diff --git a/bootstrap/js/src/tooltip.js b/bootstrap/js/src/tooltip.js
index ee721a1..eca1726 100644
--- a/bootstrap/js/src/tooltip.js
+++ b/bootstrap/js/src/tooltip.js
@@ -81,6 +81,10 @@ const Tooltip = (() => {
+ // Leading underscore on _hide and _show to rename hide/show events. This
+ // is important because prototype.js supplies Element.hide and
+ // Element.show, so if those names are used here, jquery will discover
+ // and call the prototype-supplied methods when .trigger is called.
const Event = {
- HIDE : `hide${EVENT_KEY}`,
+ HIDE : `_hide${EVENT_KEY}`,
HIDDEN : `hidden${EVENT_KEY}`,
- SHOW : `show${EVENT_KEY}`,
+ SHOW : `_show${EVENT_KEY}`,
SHOWN : `shown${EVENT_KEY}`,
您只需要在自己的代码中注意事件名称已更改,在不太可能的情况下,您正在挂钩它。