Как инициализировать всплывающие подсказки в Bootstrap 4 с чистым JavaScript? Нет jQuery

Question

Я как-то застрял с этим кодом:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
});

Я бы хотел изменить его на чистый JavaScript. Я не уверен, как вызвать функцию всплывающей подсказки, у меня уже есть некоторые идеи, такие как:

var tooltips = document.querySelectorAll("[data-toggle='tooltip']");
for(var i = 0; i < tooltips.length; i++){
   //this gives an error
   tooltips[i].tooltip();
}

Я могу получить все подсказки, но не могу их инициализировать. Если я напишу что-то вроде этого:

$(tooltips[i]).tooltip();

Тогда это сработает, но я хочу удалить зависимость jQuery, так как это единственный раздел jQuery, который у меня есть. Есть идеи? Я искал и не могу найти ничего полезного.

Answer 1

Вы можете выбрать все элементы с нужным атрибутом data-toggle, например:

    let tooltips = document.querySelectorAll('[data-toggle="tooltip"]')
    tooltips.forEach(tooltip => tooltip.tooltip())

И затем l oop в результирующем списке узлов и затем выполнить нужный метод для каждого элемента.

Однако, это не будет работать для вашего конкретного случая использования, потому что плагины Bootstrap полагаются на jQuery.