引导工具提示 - 悬停错误 - VueJS

Posted 2023-02-22

【中文标题】引导工具提示 - 悬停错误 - VueJS

【英文标题】：Bootstrap Tooltip - Hover bug - VueJS

【发布时间】：2020-08-23 16:19:39

【问题描述】：

工具提示框立即消失。

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

【问题讨论】：

这很可能是您的特定场景有问题。例如this 工作正常。您应该 create a Minimal, Reproducible Example 或者如果您认为这是一个错误，请在他们的 GitHub 上提交问题。

感谢您的回复。刚刚创建了一个示例，但它似乎也可以正常工作。我通过分析组件在实时页面上的行为找到了解决方案。

【参考方案1】：

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

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

我的工具提示对象将是：

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

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

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

.tooltip.showopacity:0.9 !important;

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

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

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

【讨论】：

虽然此代码可能提供问题的解决方案，但强烈建议您提供有关此代码为何和/或如何回答问题的附加上下文。从长远来看，只有代码的答案通常会变得毫无用处，因为未来遇到类似问题的观众无法理解解决方案背后的原因。

嗨！刚刚编辑了我的答案。上下文清晰吗？

【参考方案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'