Bootstrap5升级后输入框错误图标tooltip无法正常显示如何解决

失效原因 #

Bootstrap 5 调整了表单控件的默认布局规则，原有自定义效果失效核心是两个问题：

• 输入框和错误图标的直接父容器未设置相对定位，绝对定位的.icon元素没有正确的定位参照，位置发生偏移
• 输入框默认右侧内边距不足，图标会和输入内容重叠，同时图标层级不够时会被输入框遮挡，导致无法触发hover tooltip

预期效果 #

修复代码 #

调整CSS样式 #

/* 输入框区域包裹层，作为图标定位的参照 */
.input-wrapper {
  position: relative;
}
.error-icon {
  position: absolute;
  /* 适配不同尺寸输入框自动垂直居中 */
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: rgba(220, 53, 69, 0.8);
  z-index: 10;
  cursor: pointer;
}
/* 给存在错误图标的输入框预留右侧空间，避免文字和图标重叠 */
.form-control.has-error-icon {
  padding-right: 2.25rem;
}

调整HTML结构 #

原有结构里输入框和图标是直接放在mb-3 col-lg-4容器下，这个容器同时包含label，直接给它加相对定位会导致图标定位偏移到label区域，所以需要单独给输入框和图标加一层包裹容器：

<!-- Bootstrap 5 样式引入 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- 表单区域 -->
<div class="mb-3 col-lg-4">
  <label class="col-form-label">Test</label>
  <!-- 新增定位包裹层 -->
  <div class="input-wrapper">
    <input type="text" class="form-control form-control-sm has-error-icon" formControlName="test" />
    <span class="error-icon" [hidden]="condition" [ngbTooltip]="condition1 ? 'Invalid.' :'test Year is required.'" tooltipClass="tooltip-error">
      <em class="fas fa-exclamation-circle"></em>
    </span>
  </div>
</div>

适配说明 #

• 垂直定位改用top: 50%搭配transform: translateY(-50%)，比固定bottom值适配性更强，支持form-control-sm/默认尺寸/form-control-lg三种输入框尺寸自动居中
• 给图标设置z-index: 10保证图标在输入框上层，不会被输入框遮挡导致hover tooltip无法触发
• 如果你使用的是适配Bootstrap 5的ng-bootstrap 12+版本，需确认已经在对应模块中导入NgbTooltipModule，否则tooltip指令不会生效
• 需要显示错误态红色边框时，直接给input元素加Bootstrap内置的is-invalid类即可，无需额外自定义边框样式

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