如何修改Bootstrap 4 Tooltip透明度？解决opacity设置无效问题

嘿，这个问题我之前也碰到过！Bootstrap 4 的 Tooltip 透明度设置确实有点坑，你之前的思路没找对关键元素，我来给你捋清楚：

为什么你之前的设置没效果？ #

Bootstrap 默认是给最外层的 .tooltip 容器控制透明度的，而不是 .tooltip-inner。默认状态下 .tooltip 是 opacity: 0（隐藏），触发显示后会变成 opacity: 1。你给 .tooltip-inner 加 opacity 要么会被外层的透明度覆盖，要么只会让 tooltip 内部的文字也变透明，达不到单独控制背景透明度的效果。

两种解决方法，看你需求选： #

1. 让整个 Tooltip（背景+箭头）都有透明度

直接修改最外层 .tooltip 的 opacity 即可，同时保留你原来的背景色设置：

/* 设置整个tooltip的透明度 */
.tooltip {
  opacity: 0.8; /* 0-1之间调整，数值越小越透明 */
}

/* 保留你自定义的背景色 */
.tooltip .tooltip-inner {
  background-color: #014379;
}
.tooltip .arrow:before {
  border-top-color: #014379;
}

2. 只让 Tooltip 背景有透明度，箭头同步（或保持不透明）

如果你不想让整个 tooltip 包括文字都变透明，而是只想让背景层有透明度，那应该用 RGBA 颜色值 代替十六进制颜色，同时确保外层 .tooltip 的 opacity 是 1：

/* 确保外层容器完全不透明，避免影响内部颜色的透明度 */
.tooltip {
  opacity: 1;
}

/* 用rgba设置背景色，最后一个参数是透明度（0-1） */
.tooltip .tooltip-inner {
  background-color: rgba(1, 67, 121, 0.8); /* #014379对应的rgba，透明度0.8 */
}

/* 箭头也用相同的rgba值，保持视觉统一 */
.tooltip .arrow:before {
  border-top-color: rgba(1, 67, 121, 0.8);
}

这样设置后，就能精准控制 tooltip 的透明度啦！

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