javascript - 防止 Bootstrap 工具提示在祖先给出类时显示

Question

我有一个侧边栏菜单，用户可以在需要时折叠为图标，以最小化菜单占用的水平空间。当菜单折叠并且您将鼠标悬停在菜单图标上时，其通常的菜单文本会向右延伸。一些菜单项还附加了 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 时显示这些工具提示？添加 .min 时无需调用 tooltip("destroy")，然后删除它时再次调用 tooltip()？

Answer 1

事实证明这比我想象的要容易:show.bs.tooltip事件bubbles并且也可以被取消，所以如果我捕获它在 .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;
    }
});