Javascript 防止在祖先给定类时显示引导工具提示
我有一个侧边栏菜单,用户可以在需要时折叠成图标,以最小化菜单占用的水平空间。当菜单折叠并将鼠标悬停在菜单图标上时,其通常的菜单文本会向右延伸。一些菜单项还附带了引导工具提示,这些提示显示在条目的右侧,以显示超出菜单合理范围的更多信息 但是,当菜单折叠时,这些工具提示会妨碍右侧显示的菜单文本。我希望工具提示位于完整菜单项上(因此在展开时将鼠标悬停在图标和文本上),因此我不能仅将工具提示指定给菜单文本 当菜单被折叠时,它会得到一个额外的类来标记它 是否有一种简单的方法可以仅在菜单折叠时抑制这些工具提示,而不必在菜单折叠状态更改时重新初始化每个相关元素上的工具提示内容 简化版本是,给定以下HTML:Javascript 防止在祖先给定类时显示引导工具提示,javascript,twitter-bootstrap,tooltip,Javascript,Twitter Bootstrap,Tooltip,我有一个侧边栏菜单,用户可以在需要时折叠成图标,以最小化菜单占用的水平空间。当菜单折叠并将鼠标悬停在菜单图标上时,其通常的菜单文本会向右延伸。一些菜单项还附带了引导工具提示,这些提示显示在条目的右侧,以显示超出菜单合理范围的更多信息 但是,当菜单折叠时,这些工具提示会妨碍右侧显示的菜单文本。我希望工具提示位于完整菜单项上(因此在展开时将鼠标悬停在图标和文本上),因此我不能仅将工具提示指定给菜单文本 当菜单被折叠时,它会得到一个额外的类来标记它 是否有一种简单的方法可以仅在菜单折叠时抑制这些工具提
<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
具有.min
时,是否有一种简单的方法可以防止显示这些工具提示?不必在添加时调用工具提示(“销毁”)
,然后在删除它时再次调用工具提示()
。事实证明,这比我想象的要容易:show.bs.tooltip
事件会冒泡,也可以取消,因此如果我在侧栏中捕捉到它,我可以检查.sidebar
是否有.min
并取消事件:
$(".sidebar").on("show.bs.tooltip", function(e) {
if ($(this).hasClass("min")) {
return false;
}
});
或者,如果我想在多种元素上执行此操作,我可以在document
上捕获它,然后在e.target
的相关祖先上查找标记类(这是工具提示关联的元素):
$(".sidebar").on("show.bs.tooltip", function(e) {
if ($(this).hasClass("min")) {
return false;
}
});
$(document).on("show.bs.tooltip", function(e) {
if ($(e.target).closest(".min")[0]) { // or whatever class is relevant
return false;
}
});