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:
, my object’s opacity will remain 0.
The only solution that works for me is to set the tooltip’s class opacity manual.
opacity: 1 !important;
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):
Alternatively you can import Bootstrap and BootstrapVue scss files in a custom SCSS file:
Make sure to import the custom.scss file in your app entry point (when using sass-loader):
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 -->
It’s most likely a problem with your specific scenario. For example
Thanks for your reply. Just created an example but it seem to work fine as well. I found the solution by analyzing the component’s behaviour on the live page.
While this code may provide a solution to problem, it is highly recommended that you provide additional context regarding why and/or how this code answers the question. Code only answers typically become useless in the long-run because future viewers experiencing similar problems cannot understand the reasoning behind the solution.
Hi! Just edited my answer. Is that context legible?