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

user_15372668 0
Viewed 703

I have buttons that are close to each other that when the tooltip pops out it would block the other buttons out, here's a picture of the said problem:

the problem

If I hover the request button below the other one and then tries to hover the button above it, I will end up hovering on the tooltip instead of the button below it.

I can hide the tooltip on hover (see code below) using CSS but it produces a flickering effect when I hover to the next button then ends up not showing the tooltip on that specific next button.

.tooltip:hover {
  display: none;
}

So my questions would be:

  1. Is there a property on bootstrap-vue that would only show the tooltip when hovered on the button itself;
  2. or hide the tooltip when hovering the tooltip itself;
  3. If none, any alternative that would replicate the behavior I wanted without needing to change or edit each existing button on my app (preferred).
bootstrap-vue nuxt.js vue.js css
2 Answers

You can use the noninteractive modifier on the directive. (or prop if you're using the component)

This will make it so the tooltip can't be interacted with, so hovering the tooltip wont keep it visible.

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>

user_83979740

Alternative solution:

Add an event listener as to when the mouse leaves/(un)hover the button and hide all tooltips:

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

The con with this is that you'll have to edit this to all existing buttons on other tables. That's why I'm still open to other more easier and general solution than this.

Boostrap-vue Documentation: How to hide all open tooltips

user_153726680
Related