如何使用纯 JavaScript 在 Bootstrap 4 中初始化工具提示？没有 jQuery答案

【问题标题】：How to initialize Tooltips in Bootstrap 4 with pure JavaScript? No jQuery如何使用纯 JavaScript 在 Bootstrap 4 中初始化工具提示？没有 jQuery
【发布时间】：2020-07-17 06:05:19
【问题描述】：

我不知何故被这段代码卡住了：

$(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 部分。任何想法？我一直在寻找，但找不到任何有用的东西。

【问题讨论】：

$('[data-toggle="tooltip"]').tooltip()，tooltip是一个jquery方法。另外，我很想知道，为什么要避免使用 jquery，尽管 bootstrap 本身使用 jquery。
嗨@RaviNain，因为正如我之前所说，这是我需要jQuery的唯一部分。我的项目的其余部分在完整的 JS 上运行。
您可以使用其他方法而不是引导程序来显示工具提示吗？如果是，请查看此答案：stackoverflow.com/questions/13518151/…

标签： javascript bootstrap-4 popper.js

【解决方案1】：

您可以像这样选择具有 data-toggle 属性的所有元素：

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

然后遍历生成的节点列表，然后在每个元素上执行你想要的方法。

但是，这不适用于您的特定用例，因为 Bootstrap 插件依赖于 jQuery。

【讨论】：

Uncaught TypeError: tooltip.tooltip is not a function at displayData.js:111 at NodeList.forEach () at setToolTip (displayData.js:111) at setBestPractices (displayData.js:106 ) 在 getData (displayData.js:38) at displayData.js:140 我已经分享了类似的代码会出错。
啊。根据 Bootstrap 文档，“还要注意所有插件都依赖于 jQuery（这意味着 jQuery 必须在插件文件之前包含）。” getbootstrap.com/docs/4.0/getting-started/javascript
我知道，我想找到一个替代方案。这就是我的问题的重点。

【解决方案2】：

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

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

【讨论】：