Bootstrap 5 tooltip location not working on form validation with data attribute

Question

Reading through the docs with tooltip form validation it appears below the input. When I read the docs regarding customization of tooltip placement with the data attribute it would appear this should work:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<div class="container">
  <form class="row g-3 needs-validation" novalidate>
    <div class="col-3">
      <div class="input-group">
        <select class="form-select" aria-label="Select Day" required>
          <option selected disabled value="">Please select a day</option>
          <option value="mon">Monday</option>
          <option value="tues">Tuesday</option>
        </select>
        <div class="invalid-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" title="Day tooltip">
          Please select a day
        </div>
      </div>
    </div>
    
    <div class="col">
      <button id="build" type="submit" class="btn btn-outline-success">Submit</button>
    </div>
  </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

when adding:

data-bs-toggle="tooltip" data-bs-placement="top" 

Research:

• How to put bootstrap tooltip on textbox if validation fails for that textbox?
• showing validation error message like tooltip [closed]
• How to put a tooltip on input when its not valid
• Javascript validation with bootstrap tooltip
• Bootstrap tooltip for form validation
• How do I create a tooltip showing a validation error pointing to a field when the submit button is pressed using Javascript

In Bootstrap 5 how can I modify the location of the validation tooltip with a data attribute?

Answer 1

This is a complicated question to answer, but I'll try.

The Tooltips method for form validation described in the docs does not leverage the ToolTips API ... it just uses it's styling insofar as color and shape.

How it works is with a "~" (immediately preceding) CSS selector and is set at "display: none" initially. Once a form validates, it triggers the styling with a CSS :valid selector. So the "tooltip" must immediately precede the form element (input or any of the others).

The "valid-toolip"/"invalid-tooltip" classes have 3 very important attributes you need to be aware of:

  position: absolute;
  top: 100%;
  z-index: 5;

Also, the form field is contained in a "position-relative" class, so the "tooltip" positions itself at the bottom of that div (or rather at 100% from the top).

If for example you wanted to position the "tooltip" at the top of the "field container div" you'd need to set "top: 0" in some custom CSS class or just inline with a style attribute, like so:

<div class="col-md-4 position-relative">
    <label for="validationTooltip02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
    <div class="valid-tooltip" style="top: 0">
      Looks good! (Top)
    </div>
  </div>

Have a look at this JSFiddle for some examples.