Bootstrap+jQuery环境下Tooltip功能异常求助：样式加载失败

嗨，我来帮你搞定这个Tooltip的问题！从你描述的情况来看，Bootstrap整体功能正常，但Tooltip只显示浏览器默认的底部提示，说明Tooltip的样式或者初始化环节出了问题，咱们一步步排查：

1. 确保初始化代码在DOM就绪后执行 #

你调用的$('[data-toggle="tooltip"]').tooltip();代码，必须等页面DOM完全加载后再运行，否则可能找不到目标元素。建议把它包裹在DOM就绪事件里：

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

或者用更简洁的写法：

$(function() {
  $('[data-toggle="tooltip"]').tooltip();
});

2. 检查Bootstrap CSS的完整性 #

虽然你说Bootstrap整体功能正常，但要确认你的Bootstrap CSS文件是否包含了Tooltip相关的样式。如果你用的是自定义编译的Bootstrap，可能不小心剔除了Tooltip的样式模块。可以打开浏览器开发者工具（F12），查看页面中是否存在.tooltip、.tooltip-inner这类类名的CSS规则，如果没有，说明CSS缺失，需要重新引入完整的Bootstrap CSS。

3. 验证元素的data属性配置 #

你的按钮元素需要同时具备data-toggle="tooltip"和title（或data-original-title）属性，比如：

<button type="button" class="btn btn-secondary" data-toggle="tooltip" title="这是Tooltip提示内容">
  悬停看提示
</button>

如果title属性缺失，Tooltip会无法获取提示内容，可能 fallback 到浏览器的默认提示。

4. 检查JS加载顺序 #

必须保证加载顺序是：jQuery → Bootstrap JS，因为Bootstrap的Tooltip组件依赖jQuery。如果Bootstrap JS在jQuery之前加载，Tooltip功能会完全失效。

5. 排查样式冲突或JS冲突 #

• 打开开发者工具，查看当鼠标悬停按钮时，页面中是否生成了.tooltip元素（通常在<body>末尾）。如果生成了但看不到，可能是被自定义CSS覆盖了样式（比如display: none或者z-index过低），可以手动调整这些样式。
• 检查是否有其他JS库（比如Prototype、Zepto）和jQuery冲突，导致Bootstrap的Tooltip无法正常初始化。可以尝试在jQuery代码前加上jQuery.noConflict()，然后用jQuery代替$来调用Tooltip：

jQuery(function() {
  jQuery('[data-toggle="tooltip"]').tooltip();
});

根据你提供的截图（显示鼠标悬停时提示文字出现在浏览器窗口底部，而非Bootstrap样式的浮动提示框），大概率是初始化时机不对或者CSS缺失的问题，先试试前面两个步骤应该就能解决～

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