Search code examples
htmlvue.jstooltipbootstrap-vue

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

Solution

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