Bootstrap-vue：当您将鼠标悬停在工具提示本身（而不是按钮）上时如何隐藏 v-b-tooltip

Question

我的按钮彼此靠近，当工具提示弹出时，它会挡住其他按钮，这是上述问题的图片：

如果我将请求按钮悬停在另一个按钮下方，然后尝试将按钮悬停在其上方，我最终将悬停在工具提示上，而不是其下方的按钮上。

我可以使用 CSS 隐藏悬停时的工具提示（请参阅下面的代码），但当我悬停到下一个按钮时，它会产生闪烁效果，然后最终不会在该特定的下一个按钮上显示工具提示。

.tooltip:hover {
  display: none;
}

所以我的问题是：

1. bootstrap-vue

   上是否有一个属性，仅当鼠标悬停在按钮本身上时才会显示工具提示；
2. 或在悬停工具提示本身时隐藏工具提示；
3. 如果没有，任何替代方案都可以复制我想要的行为，而无需更改或编辑我的应用程序上的每个现有按钮（首选）。

Answer 1

您可以在指令上使用

noninteractive

修饰符。 （如果您正在使用该组件，则为 prop）

这将使工具提示无法与之交互，因此悬停工具提示不会使其保持可见。

new Vue({
  el: "#app"
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app" class="p-5">
  <b-button v-b-tooltip.noninteractive.hover title="Try and hover me!">
    Hover me
  </b-button>
</div>

Answer 2

替代解决方案：

添加一个事件侦听器，了解鼠标何时离开/（取消）悬停按钮并隐藏所有工具提示：

<button
  v-b-tooltip.hover="'Edit This Bish'"
  @mouseleave="$root.emit('bv::hide::tooltip')"
>
  The Button
</button>

这样做的缺点是您必须将其编辑到其他表格上的所有现有按钮。这就是为什么我仍然愿意接受其他比这更简单和通用的解决方案。

Boostrap-vue 文档：如何隐藏所有打开的工具提示

Answer 3

如果你不像我一样使用引导组件，你可以使用 noninteractive 指令来代替：

<div v-b-tooltip.noninteractive="{title: `I'm a tooltip`}">Hover me!</div>

供进一步参考：工具提示指令