我有一个侧边栏菜单,用户可以折叠成图标,当需要时,尽量减少菜单的水平空间。当菜单被折叠并悬停一个菜单图标时,它通常的菜单文本延伸到右边。一些菜单项还附加了引导工具提示,这些提示显示在条目的右侧,以显示比菜单中合理的信息更多的信息。
但是,当菜单被折叠时,这些工具提示会妨碍显示在右边的菜单文本。我希望工具提示出现在完整的菜单项上(因此在扩展后的图标和文本上悬停),所以我不能仅仅将工具提示分配给菜单文本。
当菜单被折叠时,它会得到一个附加的类来标记它。
是否有一种简单的方法仅在菜单折叠时才抑制这些工具提示,而不必在菜单的折叠状态更改时重新初始化每个相关元素上的工具提示内容?
简化后的版本是,给定这个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()
?
发布于 2014-08-31 13:49:19
事实证明,这比我想象的要容易得多: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;
}
});
https://stackoverflow.com/questions/25592561
复制相似问题