这个问题其实挺常见的，我来给你拆解下原因和解决办法：

核心原因分析 #

你以为先加载jQuery UI再加载Bootstrap就能避免冲突？其实这里有几个容易踩的坑：

1. 方法覆盖的反向乌龙：理论上Bootstrap的Tooltip插件会覆盖jQuery UI的.tooltip()方法，但如果你的Bootstrap JS没在jQuery UI之后加载，或者加载失败了，那调用$("[data-toggle='tooltip']").tooltip()时，执行的还是jQuery UI的方法，自然会套上它的样式。
2. CSS选择器优先级冲突：即使你正确调用了Bootstrap的Tooltip，jQuery UI的.tooltip相关CSS可能用了更具体的选择器（比如body .tooltip），或者你的Bootstrap CSS没有完全覆盖掉jQuery UI的样式规则，导致最终显示的是jQuery UI的样式。
3. 双插件抢元素：jQuery UI的Tooltip默认会识别title属性，而你同时用了Bootstrap的data-toggle="tooltip"标记，两个插件都试图处理这个元素，最终jQuery UI的样式因为某些优先级原因胜出。

具体解决方案 #

1. 严格遵守资源加载顺序 #

这是最基础也最有效的办法，必须按这个顺序加载：

• jQuery（两个插件都依赖它）
• jQuery UI的CSS + JS
• Bootstrap的CSS + JS

这样Bootstrap的Tooltip插件会彻底覆盖jQuery UI的.tooltip()方法，确保你调用的是Bootstrap版本。

2. 显式指定使用Bootstrap的Tooltip #

如果加载顺序没法调整，或者还是有冲突，可以绕开jQuery的方法，直接用Bootstrap的构造函数初始化：

// Bootstrap 5+ 版本（原生JS，无需jQuery）
$('[data-toggle="tooltip"]').each(function() {
  new bootstrap.Tooltip(this);
});

// 如果你用的是Bootstrap 4及以下版本
$('[data-toggle="tooltip"]').each(function() {
  $(this).tooltip({
    // 这里可以加Bootstrap的配置项，比如placement等
  });
});

3. 禁用jQuery UI的Tooltip功能 #

如果你根本不需要jQuery UI的Tooltip，直接把它禁用掉：

<!-- 加载jQuery UI时排除Tooltip组件 -->
<script src="jquery-ui.js" exclude="tooltip"></script>

或者在JS里提前禁用：

$.ui.tooltip.prototype.options.disabled = true;

4. 强制覆盖CSS样式 #

如果是样式优先级的问题，你可以写自定义CSS强制应用Bootstrap的Tooltip样式：

/* 先清除jQuery UI的所有Tooltip样式 */
.tooltip {
  all: unset;
}
/* 重新应用Bootstrap的Tooltip基础样式 */
.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-size: 0.875rem;
  opacity: 0;
}
.tooltip.show {
  opacity: 0.9;
}
.tooltip .tooltip-arrow {
  position: absolute;
  display: block;
  width: 0.8rem;
  height: 0.4rem;
}
/* 可以继续补充Bootstrap Tooltip的其他样式 */

验证小技巧 #

你可以在浏览器控制台里执行这段代码，确认当前调用的.tooltip()是哪个版本：

console.log($.fn.tooltip.Constructor);

如果输出bootstrap.Tooltip，说明是Bootstrap的版本；如果是$.ui.tooltip，那就要检查Bootstrap JS的加载顺序和是否加载成功了。

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