Bootstrap 工具提示 - 悬停错误 - VueJS

Question

工具提示框dissapear瞬间消失

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

Answer 1

工具提示对象似乎保留在页面上，而不是：

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

我的工具提示对象将是：

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

"fade"class瞬间消失

因为我的工具提示对象没有得到 show class，默认情况下是：

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

，我的对象的不透明度将保持为 0。

对我有用的唯一解决方案是设置 工具提示的 class 不透明度手册。

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

Answer 2

您似乎没有包括文档中提到的 BootstrapVue 的自定义 css。

Bootstrap需要 Vue 的自定义 css 才能使 bootstrap 的 css 与 Vue 的过渡组件一起工作。

在您的应用程序入口点（主要是 main.js）导入 Bootstrap 和 BootstrapVue css 文件：

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

或者，您可以在自定义 SCSS 文件中导入 Bootstrap 和 BootstrapVue scss 文件：

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

确保在您的应用程序入口点导入 custom.scss 文件（使用 sass-loader 时）：

import './custom.scss'

Bootstrap Tooltip - Hover bug - VueJS