使用引导5向输入添加工具提示

Question

我正在使用自定义css添加一个错误图标，上面有工具提示，如下所示。

在将引导程序更新到引导5之后，我无法得到我以前所得到的结果。

预期：

​

​

​

.icon {
  position: absolute;
  bottom: 6px;
  right: 10.5px;
  color: rgba(220, 53, 69, .8);
}

<!-- 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">


<!-- Body -->
<div class="mb-3 col-lg-4">
  <label class="col-form-label">Test</label>
  <input type="text" class="form-control form-control-sm" formControlName="test" />
  <span class="icon" [hidden]="condition" [ngbTooltip]="condition1 ? 'Invalid.' :'test Year is required.'" tooltipClass="tooltip-error">
    <em class="fas fa-exclamation-circle"></em>
    </span>
</div>

​

Answer 1

引导5中的窗体控制不与位置相对，因此子元素的位置-绝对值将考虑上一个父级或具有位置相对且会破坏整个位置的父级或后继类的位置。这是它的工作。

​

<!-- 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">
    
    
    <!-- Body -->
    <div class="mb-3 col-lg-4">
      <label class="col-form-label">Test</label>
      <input type="text" class="position-relative form-control form-control-sm" formControlName="test" />
      <span class="position-absolute top-0 start-100 text-danger" style="margin-left: -2.2em; margin-top: 2.5em;" [hidden]="condition" [ngbTooltip]="condition1 ? 'Invalid.' :'test Year is required.'" tooltipClass="tooltip-error">
        <em class="fas fa-exclamation-circle"></em>
        </span>
    </div>

​