聚焦空字段时手动触发的Bootstrap Tooltip背景色修改无效问题

首先得帮你理清问题根源：你用的CSS选择器.form-control + .tooltip > .tooltip-inner之所以失效，是因为Bootstrap的Tooltip元素并不是直接作为.form-control的相邻兄弟元素存在的——Bootstrap会把Tooltip动态插入到body或者指定容器中，和你的输入框不在同一个DOM层级，所以相邻选择器+根本匹配不到目标元素。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：给Tooltip添加自定义类（最推荐） #

这种方式既能精准定位目标Tooltip，又不会污染全局样式，是Bootstrap官方推荐的自定义Tooltip样式的方法。

步骤1：修改HTML，添加自定义类标识 #

在每个带Tooltip的输入框上，新增data-custom-class="custom-error-tooltip"属性：

<input type="text" data-toggle="tooltip" title="Your ID goes here" class="form-control" id="rn" name="rn" data-trigger="manual" data-custom-class="custom-error-tooltip">

（其他输入框同理添加该属性）

步骤2：初始化Tooltip时启用自定义类 #

调整你的jQuery代码，先初始化Tooltip并开启自定义类支持：

$(document).ready(function(){ 
  // 先初始化所有Tooltip，启用自定义类
  $("#rn, #fname, #deg, #cam, #city").tooltip({
    customClass: "custom-error-tooltip"
  });

  // 原有的聚焦/失焦逻辑
  $("#rn, #fname, #deg, #cam, #city").focus(function(){ 
    if(!$(this).val()){ 
      $(this).tooltip("show"); 
    } 
  }); 
  $("#rn, #fname, #deg, #cam, #city").blur(function(){ 
    $(this).tooltip("hide"); 
  }); 
});

步骤3：编写CSS样式 #

现在就可以通过自定义类精准修改背景色了，还能顺便调整箭头颜色保持统一：

/* 修改Tooltip内容区背景色 */
.custom-error-tooltip .tooltip-inner {
  background-color: #EE022C;
  color: #fff; /* 可选：调整文字颜色保证可读性 */
}

/* 修改Tooltip箭头颜色（根据你需要的方向选择） */
.custom-error-tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #EE022C;
}
.custom-error-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #EE022C;
}

方案2：全局覆盖Tooltip样式（不推荐，会影响所有Tooltip） #

如果你希望页面上所有Tooltip都用这个红色背景，可以直接覆盖Bootstrap的默认样式，但要确保你的CSS文件在Bootstrap CSS之后加载：

.tooltip-inner {
  background-color: #EE022C !important;
}

/* 同步修改箭头颜色 */
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #EE022C !important;
}

⚠️ 注意：!important是为了强制覆盖Bootstrap的默认样式优先级，尽量少用，优先选择方案1。

方案3：调整Tooltip的容器层级（可选） #

你可以把Tooltip的容器设置为输入框的父元素，这样就能用层级选择器匹配，但灵活性不如方案1：

1. 在初始化Tooltip时设置container: ".form-group"，或者在HTML里加data-container=".form-group"
2. 然后编写CSS：

.form-group .tooltip .tooltip-inner {
  background-color: #EE022C;
}

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