如何将Bootstrap 4.6中基于jQuery的Tooltip功能转换为纯JavaScript实现

没问题！Bootstrap 4.6本身就支持纯JavaScript初始化Tooltip，完全不需要依赖jQuery——刚好适配你的纯JS项目。下面是具体的实现方案：

核心思路 #

Bootstrap 4的组件都有对应的原生JS API，Tooltip也不例外。我们只需要用原生DOM方法选中目标元素，然后逐个初始化bootstrap.Tooltip实例即可。

修改后的完整代码 #

<body>
 <div class="container">
 <h3>Tooltip Example</h3>
 <input data-toggle="tooltip" title="Hooray!">
 <input data-toggle="tooltip" title="Not Hooray!">
 </div>
 <script>
 // 页面加载完成后初始化Tooltip
 document.addEventListener('DOMContentLoaded', function() {
   // 获取所有带data-toggle="tooltip"的元素
   const tooltipElements = document.querySelectorAll('[data-toggle="tooltip"]');
   // 循环初始化每个Tooltip
   tooltipElements.forEach(element => {
     new bootstrap.Tooltip(element);
   });
 });
 </script>
</body>
</html>

额外提示 #

• 依赖检查：Bootstrap 4的Tooltip依赖Popper.js，确保你已经在Bootstrap JS之前引入了popper.min.js（如果你用的是官方完整的bootstrap.min.js，其实已经内置了Popper，无需额外引入）。
• 自定义配置：如果需要调整Tooltip的行为（比如显示位置、触发方式），可以在初始化时传入配置对象，示例：

  new bootstrap.Tooltip(element, {
    placement: 'bottom', // 设置为底部显示
    trigger: 'hover focus' // 鼠标悬停或元素获得焦点时触发
  });
  

• 动态管理：如果需要对已初始化的Tooltip进行销毁或更新，可以调用实例方法：

  // 获取已存在的Tooltip实例
  const tooltipInstance = bootstrap.Tooltip.getInstance(element);
  // 销毁Tooltip
  tooltipInstance.dispose();
  // 更新Tooltip内容
  tooltipInstance.update();
  

内容的提问来源于stack exchange，提问作者patrick96