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

Question

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

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

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

.tooltip:hover {
  display: none;
}

所以我的问题是：

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

Answer 1

备选方案：

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

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

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

Boostrap-vue 文档：How to hide all open tooltips

Answer 2

您可以在指令上使用 noninteractive 修饰符。（或道具，如果你正在使用该组件）

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

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

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.21.2/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/bootstrap-vue@2.21.2/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>

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

Bootstrap-vue: How to hide the v-b-tooltip when you hover on the tooltip itself (not the button)

css

vue.js

nuxt.js

bootstrap-vue