Bootstrap工具提示消失目标

时间:2014-06-13 02:39:45

标签: twitter-bootstrap tooltip

我已经安装了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;。那是为什么?

2 个答案:

答案 0 :(得分:0)

我想出来了。我看到很多人都面临这个问题,所以也许会有所帮助。

我只是下载了最新的jquery-1.11.1.min.js并安装了它。这样做之后,现在工作正常。

答案 1 :(得分:0)

这很旧,但是我今天在一个网站上遇到了,所以我会回答,以防最终对其他人有帮助...

如果您在网站上加载了prototype.js,则prototype adds a .hide() method to elements

function hide(element) {
  element = $(element);
  element.style.display = 'none';
  return element;
}

jquery的触发方法mistakes this for an event emitter并调用它以宣布工具提示已隐藏:

elem[ type ]();

...从而隐藏了工具提示所附加的元素。

最好的解决方法是停止使用prototype.js,它以与现代标准不兼容的方式扩展DOM。

第二个最好的解决方法是避免使用引导工具提示,如果您无法杀死prototype.js的话。浏览器工具提示可以正常工作。

如果您确实需要两者,则可以使用引导程序的tooltips.js来更改hide事件(以及在那里的show事件)的名称:

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}`,

或者您可以猴子打补丁:

!function (Event) {
  Event.HIDE = '_' + Event.HIDE
  Event.SHOW = '_' + Event.SHOW
}(jQuery.fn.tooltip.Constructor.Event)

您只需在自己的代码中知道事件名称已更改,就不太可能挂上它。