CODEWITHSUNDEEP
htmlvue.jstooltipbootstrap-vue
Florin Relea
Florin Relea

Reputation: 513

Bootstrap Tooltip - Hover bug - VueJS

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>

Tooltip bug

Upvotes: 6

Views: 3775

Answers (2)

Fatih Bulut
Fatih Bulut

Reputation: 2657

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'

Upvotes: 6

Florin Relea
Florin Relea

Reputation: 513

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>

Upvotes: 6

Related Questions