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

Question

目前我正在使用 Vue/Nuxt.js 并且我正在尝试使用 java 脚本启动 Bootstrap 工具提示。 我知道它可以使用 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，但它们似乎都没有初始化工具提示。

更新：

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

Answer 1

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

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

然后在nuxt.config.js和任何可以使用$或window.$地方加载插件

调用$('[data-toggle="tooltip"]').tooltip(); 你需要的地方

Answer 2

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