Bootstrap Tooltip与Standard Tooltip hover时同时显示的问题根源分析

这种同时弹出Bootstrap Tooltip和原生Standard Tooltip的情况，本质上是同一个span元素被双重绑定了tooltip触发逻辑，具体常见原因有这几个：

• 两种tooltip机制被重复绑定
  你的代码大概率同时做了两件事：一是通过Bootstrap的API（比如$('.your-span').tooltip()）给span初始化了Bootstrap Tooltip；二是这个span本身带有原生title属性，或是被其他代码设置了title值——浏览器会默认把title属性作为原生tooltip的内容，鼠标悬停时自动触发显示。

  很多人以为Bootstrap会自动覆盖原生title的行为，但如果你的Bootstrap Tooltip配置没明确处理（比如直接复用了元素的title属性作为提示内容），浏览器的原生tooltip触发逻辑并不会被完全屏蔽，最终就会出现两者同时展示的情况。

• 事件默认行为未被阻止
  Bootstrap Tooltip是通过监听mouseenter/mouseover这类鼠标事件触发的，原生tooltip同样依赖这些事件。如果Bootstrap Tooltip的事件处理逻辑没有阻止原生事件的默认行为，就会导致两套tooltip的触发逻辑都被执行，最终同时弹出。

• 初始化逻辑重复执行
  比如页面渲染完成后、或是动态更新元素时，你的tooltip初始化代码被多次调用：第一次初始化了Bootstrap Tooltip，第二次因为逻辑漏洞，又给元素绑定了原生tooltip触发（比如重新设置了title属性，或是调用了其他库的tooltip方法）。

举个典型的反例：

<span class="tooltip-demo" title="原生提示内容">悬停我试试</span>
<script>
  // 同时初始化Bootstrap Tooltip，且保留原生title属性
  $('.tooltip-demo').tooltip({
    title: 'Bootstrap提示内容'
  });
</script>

这种场景下，鼠标悬停时Bootstrap的tooltip会弹出，同时浏览器识别到title属性，也会触发原生tooltip显示。

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