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元素中。

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

2 个答案: