[英]How to initialize Bootstrap tooltip in JavaScript not jquery in Vue/Nuxt.js?
Currently I am using Vue/Nuxt.js and I am trying to initiate a Bootstrap tooltip using java script.目前我正在使用 Vue/Nuxt.js 并且我正在尝试使用 java 脚本启动 Bootstrap 工具提示。 I am aware it can be initialized using jquery but I need it to be initialized using javascript.
我知道它可以使用 jquery 进行初始化,但我需要使用 javascript 对其进行初始化。
Here is my code for the tooltip:这是我的工具提示代码:
<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>
In my Nuxt.Js layout I have a mounted function which is where I am trying to initialize the tooltip.在我的 Nuxt.Js 布局中,我有一个挂载的函数,我正在尝试初始化工具提示。
Here is my code for the layout:这是我的布局代码:
mounted: function() {
// find an element initialized with Tooltip
let myLinkWithTooltip = document.querySelector(".property-tooltip");
// reference the initialization object
myLinkWithTooltip.tooltip;
}
I have tried using the querySelector, getElementById and getElementByClass, but none of them seem to initialize the tooltip.我曾尝试使用 querySelector、getElementById 和 getElementByClass,但它们似乎都没有初始化工具提示。
UPDATE:更新:
I have got the first part working, so the query selector is finding the element, but it still needs to be initialized.我已经让第一部分工作了,所以查询选择器正在查找元素,但它仍然需要初始化。
I have created a plugins named bootstrap.js
我创建了一个名为
bootstrap.js
的插件
window.$ = window.jQuery = require('jquery');
require('bootstrap')
then load the plugin in nuxt.config.js
and from anywhere you can use $
or window.$
然后在
nuxt.config.js
和任何可以使用$
或window.$
地方加载插件
call $('[data-toggle="tooltip"]').tooltip();
调用
$('[data-toggle="tooltip"]').tooltip();
where you need你需要的地方
You should add show
class when you want to show tool tip.当你想显示工具提示时,你应该添加
show
类。 Even jQuery add/remove css class dynamically to the div
element.甚至 jQuery 动态添加/删除 css 类到
div
元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.