如何使用纯 JavaScript 初始化 Bootstrap 4 中的工具提示？没有 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

对于新的Bootstrap 5，这将是没有 jQuery 的新选项：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

更多信息： https: //getbootstrap.com/docs/5.0/components/tooltips/

笔记：

在 Bootstrap 4 中，如果没有 jQuery，则无法初始化工具提示。这是一个示例： https: //jsfiddle.net/30c6kmnL/

函数/类存在依赖关系，Tooltip如果没有 jQuery，就无法调用（据我所知）（您可能需要重写整个工具提示函数/类）。我遇到这样的错误：

未捕获的类型错误：bootstrap.Tooltip 不是构造函数

如果您知道如何修复它，请在代码片段上进行修复并分享您的结果。