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

Question

工具提示框立即消失。

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

Answer 1

看来您没有包含文档中提到的 BootstrapVue 的自定义 css。

需要 BootstrapVue 的自定义 css 才能使 bootstrap 的 css 与 Vue 的过渡组件配合使用。

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

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'

Answer 2

看起来工具提示对象保留在页面上，而不是：

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

我的工具提示对象将是：

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

“褪色”类立即消失。

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

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

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

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

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