How to initialize Bootstrap tooltip in JavaScript not jquery in Vue/Nuxt.js?

Question

Currently I am using Vue/Nuxt.js and I am trying to initiate a Bootstrap tooltip using java script. I am aware it can be initialized using jquery but I need it to be initialized using 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.

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.

UPDATE:

I have got the first part working, so the query selector is finding the element, but it still needs to be initialized.

Answer 1

I have created a plugins named 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.$

call $('[data-toggle="tooltip"]').tooltip(); where you need

Answer 2

You should add show class when you want to show tool tip. Even jQuery add/remove css class dynamically to the div element.