Bootstrap Tooltip - Hover bug - VueJS

Question

The tooltip box dissapear disappear instantly.

<p id="tooltip_target_tags">Some text</p>
<b-tooltip target="tooltip_target_tags" placement="top" triggers="hover">
    <!-- CONTENT -->
</b-tooltip>

Answer 1

It looks like tooltip object remains on the page but instead of:

<div class="tooltip fade bs-tooltip-top show">

my tooltip object will be:

<div class="tooltip b-tooltip bs-tooltip-top fade">

the "fade" class disappearing instantly.

Because my tooltip object doesn't get the show class, which by default is:

.tooltip.show{opacity:0.9 !important;}

, my object's opacity will remain 0.

The only solution that works for me is to set the tooltip's class opacity manual.

<style>
      .tooltip{
            opacity: 1 !important;
      }
</style>

Answer 2

It looks like you are not including BootstrapVue's custom css as mentioned in the docs.

BootstrapVue's custom css is required to make bootstrap's css work with Vue's transition component.

import Bootstrap and BootstrapVue css files in your app entry point(mostly main.js):

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Alternatively you can import Bootstrap and BootstrapVue scss files in a custom SCSS file:

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';

Make sure to import the custom.scss file in your app entry point (when using sass-loader):

import './custom.scss'