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>
-
It's most likely a problem with your specific scenario. For example this works fine. You should create a Minimal, Reproducible Example or if you think it's a bug, submit an issue on their GitHub.Shoejep– Shoejep2020-05-08 20:42:56 +00:00Commented May 8, 2020 at 20:42
-
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.Florin Relea– Florin Relea2020-05-09 04:59:54 +00:00Commented May 9, 2020 at 4:59
Add a comment
|
2 Answers
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'
Comments
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>
2 Comments
palaѕн
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.
Florin Relea
Hi! Just edited my answer. Is that context legible?