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 {？}}时，是否有一种简单的方法可以阻止显示这些工具提示？添加tooltip("destroy")时无需致电.min，然后在删除时再次致电tooltip()？

Answer 1

事实证明这比我想象的要容易：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;
    }
});

防止Bootstrap工具提示显示祖先何时给出类

1 个答案: