CODEWITHSUNDEEP
cssvue.jsnuxt.jsbootstrap-vue
Yong
Yong

Reputation: 1685

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

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).

Upvotes: 2

Views: 3265

Answers (3)

Guilherme Rossi
Guilherme Rossi

Reputation: 1

If you don't use bootstrap components like me, you can use the noninteractive directive instead:

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

For futher reference: tooltip directives

Upvotes: -1

Yong
Yong

Reputation: 1685

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

Upvotes: 0

Hiws
Hiws

Reputation: 10324

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/[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>

Upvotes: 3

Related Questions