Как инициализировать всплывающую подсказку Bootstrap в JavaScript, а не jquery в Vue/Nuxt.js?

Question

В настоящее время я использую Vue/Nuxt.js, и я пытаюсь инициировать всплывающую подсказку Bootstrap с помощью сценария 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>

В моем макете 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 элемент.