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

目前我正在使用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>

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

更新：

---

我已经完成了第一部分的工作，因此查询选择器正在查找元素，但它仍然需要初始化。

当您要显示工具提示时，应该添加

show

类。甚至jQuery也可以动态地将css类添加/删除到

div

元素。

当您想要显示工具提示时，应该添加

show

类。甚至jQuery也会动态地向

div

元素添加/删除css类。

我已经创建了一个名为

bootstrap.js

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

然后将插件加载到

numxt.config.js

中，并从任何可以使用

$

或

窗口的地方加载。$

---

调用

$（'[data toggle=“tooltip”]'）。tooltip（）你需要的地方
我已经创建了一个名为
bootstrap.js的插件

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

然后将插件加载到
numxt.config.js
中，并从任何可以使用
$
或
窗口的地方加载。$

调用
$（'[data toggle=“tooltip”]'）。tooltip（）你需要的地方
我不认为你可以，Bootstrap4.x工具提示是一个jQuery插件。这样混合是个坏主意。至少使用引导vue@LukeRamsden，我有查询选择器来查找元素，但是你知道为什么.tooltip不起作用吗？因为.tooltip（）是一个jQuery插件，所以仅仅查找元素是不够的。在Vue中单独使用jQuery或操纵DOM不是一个好主意，因为Vue无法检测到您的更改，它将在下次更新时用自己的虚拟DOM覆盖这些更改。如果你想使用Bootstrap来实现CSS以外的任何东西，那么就使用Vue的Bootstrap实现：我不认为你可以，Bootstrap 4.x工具提示是一个jQuery插件。像这样混合是不好的。至少使用引导vue@LukeRamsden，我有查询选择器来查找元素，但是你知道为什么.tooltip不起作用吗？因为.tooltip（）是一个jQuery插件，所以仅仅查找元素是不够的。在Vue中单独使用jQuery或操纵DOM不是一个好主意，因为Vue无法检测到您的更改，它将在下次更新时用自己的虚拟DOM覆盖这些更改。如果您想将引导用于CSS以外的任何内容，请使用Vue的引导实现：