html - 引导工具提示 - 悬停错误 - 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

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

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

我的工具提示对象将是：

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

“淡入淡出”类立即消失。

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

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

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

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

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

Answer 2

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

需要 BootstrapVue 的自定义 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'