Bootstrap 4中Tooltip背景颜色无法修改问题求助

问题分析 #

你遇到的Tooltip背景色无法修改的问题，核心原因是CSS优先级不足、样式加载顺序错误，同时箭头样式的CSS属性也存在误用。以下是具体修复步骤：

1. 修正jQuery导入的语法错误 #

脚本代码中jQuery导入缺少闭合单引号，可能导致Tooltip初始化异常，先修正：

import $ from 'jquery'; // 补上缺失的单引号
async mounted(){
    this.setRemoteVideo(this.$refs.remoteVideo);
    feather.replace();
    $('[data-toggle="tooltip"]').tooltip();
},

2. 调整CSS加载顺序 #

确保你的自定义CSS文件在Bootstrap CSS之后引入，这样自定义样式才能覆盖Bootstrap的默认样式。

3. 优化自定义CSS（提高优先级+修正箭头属性） #

Bootstrap的Tooltip内置样式优先级较高，需要用更具体的选择器覆盖，同时修正右边Tooltip箭头的CSS属性：

.info-icon{
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--white);
}

.info-icon:hover{
  color: var(--secondary-color);
}

/* 增加body前缀提高优先级，确保覆盖Bootstrap默认样式 */
body .tooltip-inner {
  background-color: #ff0000 !important;
  box-shadow: 0px 0px 4px black;
  opacity: 1;
}

/* 右边Tooltip的箭头对应border-right-color，而非border-bottom-color */
body .bs-tooltip-right .arrow::before, 
body .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #ff0000 !important;
}

验证效果 #

修改完成后重新运行项目，Tooltip背景色会变为红色，右侧箭头也会同步匹配颜色，符合自定义需求。

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