如何移除Bootstrap Tooltip箭头上方的灰色边框？

这种莫名冒出来的小样式问题确实挺让人挠头的！既然你确认没修改过Bootstrap原生CSS，而且所有MVC项目都碰到这个情况，我猜大概率是全局样式冲突或者第三方CSS的隐性影响，给你几个排查和解决的思路：

第一步：用开发者工具定位问题根源 #

打开浏览器开发者工具（按F12），先触发tooltip显示，然后在Elements面板里搜索.tooltip找到对应的元素，重点检查两个部分：

• tooltip的容器（.tooltip）
• tooltip的箭头元素（.tooltip-arrow）
  切换到Styles面板，查看border、outline、box-shadow这几个属性，看看是不是有非Bootstrap的规则在生效——比如有些项目会用*选择器给全局元素加默认outline或边框，就会不小心影响到tooltip。

第二步：针对性修复样式 #

根据排查结果，添加自定义CSS覆盖冲突规则：

1. 如果是outline导致的：

/* 移除tooltip容器和箭头的outline */
.tooltip, .tooltip-arrow {
  outline: none;
}

2. 如果是box-shadow导致的：

/* 移除tooltip相关元素的阴影 */
.tooltip, .tooltip-arrow {
  box-shadow: none;
}

3. 如果是border规则影响了箭头：

/* 清除tooltip箭头的边框 */
.tooltip-arrow {
  border: none;
}

小贴士：尽量避免用!important，如果找到冲突的CSS选择器，写更具体的选择器（比如body .tooltip-arrow）来覆盖，更符合CSS优先级规则。

额外排查点 #

• 检查项目里有没有引入其他第三方CSS库（比如自定义全局重置样式、其他UI组件库），这些库的全局样式可能和Bootstrap tooltip的样式冲突；
• 确认下是不是团队里有人在全局样式文件里加了通用的边框/outline规则，只是你没注意到~

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