cssvue.jsnuxt.jsbootstrap-vue

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

  • 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>