Prototype、jQuery和Bootstrap会在鼠标退出时隐藏工具提示元素

Prototype, jQuery and Bootstrap cause tooltip elements to be hidden on mouse out

本文关键字：退出 隐藏 工具提示 元素 鼠标 jQuery Bootstrap Prototype      更新时间：2023-09-26

我一直在做一个使用Prototype, jQuery和Bootstrap的项目。我们在UI中使用Bootstrap工具提示，通常在图标和文本上，如下所示:

<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别名作为$前缀是由原型使用。这工作得很好，但一旦你从工具提示元素移动鼠标，它有style="display: hidden;应用。我想不出任何合理的解释，所以不知道有没有人有什么想法?

使用这个技巧来解决这个问题:

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

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

相关文章：