Add a tooltip to the input with bootstrap 5

user_16938680 0
Viewed 111

I am using custom css for adding an error icon with tooltip on it as below.

I am not able to get the result what I used to get after updating bootstrap to bootstrap 5.

Expected:

Expected

.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>

bootstrap-5 angular css html
1 Answers

Form-control in bootstrap 5 doesn't come with the position relative and hence the child element's position-absolute will consider the position of the last parent or grand or grand grand parent class which has a position relative and that will mess the whole positioning. Here is the work around for it.

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

user_169386800
Related