如何在 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元素。