我有一个侧边栏菜单,用户可以在需要时将其折叠到图标上,以最小化菜单占用的水平空间。折叠菜单并且将鼠标悬停在菜单图标上时,其通常的菜单文本向右延伸。一些菜单项上还附加了Bootstrap工具提示,这些提示显示在条目的右侧,以显示比菜单中合理显示的更多信息。
但是,当折叠菜单时,这些工具提示会妨碍右侧显示的菜单文本。我希望工具提示位于完整的菜单项上(以便在展开时将其悬停在图标和文本上),所以我不能仅将工具提示分配给菜单文本。
折叠菜单时,它将添加一个附加类以对其进行标记。
有没有一种简单的方法可以仅在折叠菜单时抑制这些工具提示,而不必在菜单的折叠状态发生变化时在每个相关元素上重新初始化工具提示?
简明版本为以下HTML:
<div class="sidebar">
<div title="A tooltip">Menu item 1</div>
<div title="Another tooltip">Menu item 2</div>
<div title="Another tooltip">Menu item 3</div>
</div>
这段代码连接了工具提示:
$(".sidebar [title]").tooltip();
有没有一种简单的方法可以防止
.sidebar
具有.min
时显示这些工具提示?在添加tooltip("destroy")
时不必调用.min
,然后在删除它时再次调用tooltip()
吗? 最佳答案
事实证明,这比我想像的要容易:show.bs.tooltip
事件冒泡并且也可以取消,因此如果我在.sidebar
上捕获它,则可以检查.sidebar
是否具有.min
并取消活动:
$(".sidebar").on("show.bs.tooltip", function(e) {
if ($(this).hasClass("min")) {
return false;
}
});
或者,如果我想使用多种元素,可以在
document
上捕获它,然后在e.target
的相关祖先上查找标记类(与工具提示相关联的元素):$(document).on("show.bs.tooltip", function(e) {
if ($(e.target).closest(".min")[0]) { // or whatever class is relevant
return false;
}
});