如何用纯 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/

注：

在Bootstrap4中，没有jQuery就不能初始化工具提示。这是一个例子： https://jsfiddle.net/30c6kmnL/

存在对 function/class Tooltip 的依赖，如果没有 jQuery 就无法调用（据我所知）（您可能需要重写整个工具提示 function/class ).我遇到了这样的错误：

Uncaught TypeError: bootstrap.Tooltip is not a constructor

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

Answer 2

我想我会使用同样针对 Bootstrap 4.x 的纯 JS 给出一个答案。下面的代码片段将在 Bootstrap 4.x.

中初始化页面上的所有工具提示

function setTooltips() {
        let tooltips = document.querySelectorAll('[data-toggle="tooltip"]');
        
        for(let i = 0; i < tooltips.length; i++) {
          let tooltip = new bootstrap.Tooltip(tooltips[i]);
        }   
      }

我会在 DOMContentLoaded 事件中全局调用它以定位任何页面上的任何工具提示。

    window.addEventListener('DOMContentLoaded', function() {
setTooltips();
}, false);

Bootstrap 5 做事不同，使用 Federico 的回答，这是 Bootstrap 5+ 中初始化工具提示的默认方式。

如何用纯 JavaScript 初始化 Bootstrap 4 中的工具提示？没有 jQuery

How to initialize Tooltips in Bootstrap 4 with pure JavaScript? No jQuery

javascript

bootstrap-4

popper.js