Bootstrap 4提示框（Tooltip）无法显示默认样式求助

嘿，我来帮你搞定这个Tooltip样式的问题！这种一个元素正常、另一个没样式的情况，大概率是初始化或元素属性的小疏漏，咱们一步步排查：

1. 优先检查Tooltip的初始化范围 #

很多新手朋友容易犯的错是只给特定元素做了初始化，比如只针对邮箱链接写了初始化代码，漏掉了第二个元素。

举个反例，如果你之前写的是这种针对性初始化：

$('a[href^="mailto:"]').tooltip();

那只有邮箱链接会被初始化，第二个元素自然没样式。正确的做法是全局初始化所有带data-toggle="tooltip"的元素：

$(function () {
  // 选中所有带tooltip标记的元素并初始化
  $('[data-toggle="tooltip"]').tooltip();
});

2. 确认第二个元素的HTML属性是否完整 #

仔细检查第二个元素的属性有没有拼写错误：

• 是不是把data-toggle="tooltip"写成了data-toogle="tooltip"（少了个t）？
• 有没有加title属性？Tooltip的提示内容全靠这个属性提供。

正确的示例代码应该是这样：

<a href="#" data-toggle="tooltip" title="这是JavaScript相关的提示内容">JavaScript</a>

3. 检查依赖库的加载顺序 #

Bootstrap 4的Tooltip依赖jQuery → Popper.js → Bootstrap JS这个顺序，顺序错了很容易导致部分元素初始化异常。你可以核对一下自己的引入代码：

<!-- 第一步：加载jQuery -->
<script src="jquery.min.js"></script>
<!-- 第二步：加载Popper.js -->
<script src="popper.min.js"></script>
<!-- 第三步：加载Bootstrap JS -->
<script src="bootstrap.min.js"></script>

4. 排查CSS加载或冲突问题 #

虽然第一个元素有样式，但也可以快速确认一下：

• 有没有正确引入Bootstrap的CSS文件？

<link rel="stylesheet" href="bootstrap.min.css">

• 打开浏览器开发者工具（F12），查看第二个Tooltip的DOM元素，看看tooltip、tooltip-inner这些Bootstrap自带的类有没有被正确应用，会不会被你自己写的其他CSS覆盖了。

5. 如果是动态生成的元素 #

如果你的第二个链接是页面加载完成后通过JS动态添加的，那页面初始化时的代码不会对它生效。这种情况可以用事件委托，或者在元素生成后手动初始化：

// 事件委托方式，适配所有动态生成的tooltip元素
$(document).on('mouseenter', '[data-toggle="tooltip"]', function () {
  $(this).tooltip('show');
}).on('mouseleave', '[data-toggle="tooltip"]', function () {
  $(this).tooltip('hide');
});

// 或者元素生成后手动初始化
$('#your-dynamic-element').tooltip();

先从初始化范围和HTML属性这两点查起，这是最常见的问题根源～

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