如何在 JavaScript 中初始化 Bootstrap 工具提示而不是在 Vue/Nuxt.js 中的 jquery？答案

【问题标题】：How to initialize Bootstrap tooltip in JavaScript not jquery in Vue/Nuxt.js?如何在 JavaScript 中初始化 Bootstrap 工具提示而不是在 Vue/Nuxt.js 中的 jquery？
【发布时间】：2018-09-26 09:30:34
【问题描述】：

目前我正在使用 Vue/Nuxt.js，我正在尝试使用 java 脚本启动引导工具提示。我知道它可以使用 jquery 进行初始化，但我需要使用 javascript 对其进行初始化。

这是我的工具提示代码：

<span class="badge badge-pill badge-primary position-absolute property-tooltip d-none d-md-block py-1 rounded-circle" data-toggle="tooltip" data-placement="right" v-bind:title="content.tooltipText" id="property-tooltip">?</span>

在我的 Nuxt.Js 布局中，我有一个挂载函数，我正在尝试初始化工具提示。

这是我的布局代码：

mounted: function() {
// find an element initialized with Tooltip
let myLinkWithTooltip = document.querySelector(".property-tooltip");

// reference the initialization object
myLinkWithTooltip.tooltip;
}

我尝试过使用 querySelector、getElementById 和 getElementByClass，但它们似乎都没有初始化工具提示。

更新：

我已经完成了第一部分，所以查询选择器正在寻找元素，但它仍然需要初始化。

【问题讨论】：

我不认为你可以，Bootstrap 4.x 工具提示是一个 jQuery 插件。
这样混合是个坏主意。至少使用 bootstrap vue
@LukeRamsden，我有查询选择器来查找元素，但你知道为什么 .tooltip 不起作用吗？
因为 .tooltip() 是一个 jQuery 插件，所以仅仅找到元素是不够的。
在 Vue 中使用 jQuery 或自己操作 DOM 不是一个好主意，因为 Vue 无法检测到您的更改，它只会在下一次更新滴答时用自己的虚拟 DOM 覆盖它们。如果您想将 Bootstrap 用于 CSS 以外的任何内容，请使用 Vue 的 Bootstrap 实现：bootstrap-vue.js.org/docs/directives/tooltip

标签： javascript twitter-bootstrap vue.js nuxt.js twitter-bootstrap-tooltip

【解决方案1】：

我创建了一个名为bootstrap.js的插件

window.$ = window.jQuery = require('jquery');
require('bootstrap')

然后在nuxt.config.js 中加载插件，并从您可以使用$ 或window.$ 的任何地方加载

在您需要的地方致电$('[data-toggle="tooltip"]').tooltip();

【讨论】：

【解决方案2】：

当你想显示工具提示时，你应该添加show 类。甚至 jQuery 动态添加/删除 css 类到 div 元素。

【讨论】：