Bootstrap4如何通过新增自定义类修改指定tooltip的背景色

你加的自定义类不生效，是因为Bootstrap 4生成的Tooltip DOM元素默认是直接插入到<body>标签末尾的，和你加了.red-tooltip类的触发<a>标签没有父子包含关系，所以直接在原有CSS选择器前加.red-tooltip无法匹配到Tooltip元素，样式自然不生效。

可以用Bootstrap 4 Tooltip自带的customClass配置项，给需要红色样式的Tooltip额外加专属类即可解决，有两种实现方式：

方式1：用data属性配置，无需修改原有Tooltip初始化代码 #

给你的触发元素新增data-custom-class="red-tooltip-wrap"属性，修改后的HTML如下：

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" class="red-tooltip" data-custom-class="red-tooltip-wrap">Tooltip on bottom</a>

方式2：JS初始化时动态加类 #

如果要批量判断触发元素的类来加自定义Tooltip类，可以修改初始化代码：

$('[data-toggle="tooltip"]').tooltip({
  customClass: function() {
    // 触发元素有red-tooltip类就给Tooltip加红色专属类
    return $(this).hasClass('red-tooltip') ? 'red-tooltip-wrap' : ''
  }
})

最后修改你的CSS代码，把选择器前缀换成给Tooltip加的专属类red-tooltip-wrap即可：

.red-tooltip-wrap.tooltip.show {
  opacity: 1;
}

.red-tooltip-wrap .tooltip-inner {
  background-color: #ff0000;
  box-shadow: 0px 0px 4px black;
  opacity: 1 !important;
}

.red-tooltip-wrap.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #ff0000 !important;
}

.red-tooltip-wrap.tooltip.bs-tooltip-left .arrow:before {
 border-left-color: #ff0000 !important;
}

.red-tooltip-wrap.tooltip.bs-tooltip-bottom .arrow:before {
 border-bottom-color: #ff0000 !important;
}

.red-tooltip-wrap.tooltip.bs-tooltip-top .arrow:before {
 border-top-color: #ff0000 !important;
}

注：customClass配置的类是直接加在Tooltip最外层元素上的，和.tooltip类属于同一元素的类，对应选择器需要连写不要加空格。

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