Bootstrap 5 工具提示位置无法使用数据属性进行表单验证

Question

使用 tooltip form validation it appears below the input. When I read the docs regarding customization of tooltip placement with the data attribute 阅读文档，这似乎应该有效：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/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/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

添加时：

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

研究：

showing validation error message like tooltip [closed]
How to put a tooltip on input when its not valid
Bootstrap tooltip for form validation

在Bootstrap5中如何修改带有数据属性的验证工具提示的位置？

Answer 1

这是一个很难回答的问题，但我会尽力回答。

Tooltips method for form validation described in the docs does not leverage the ToolTips API ...它只是在颜色和形状方面使用它的样式。

它的工作原理是使用“~”（紧接在前面）CSS 选择器，最初设置为“显示：none”。一旦表单通过验证，它就会触发带有 CSS :valid selector 的样式。因此，“工具提示”必须紧接在表单元素 （input 或任何其他元素）.

之前

“valid-toolip”/“invalid-tooltip”class有 3 个非常重要的属性需要注意：

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

此外，表单字段包含在“position-relative”class 中，因此“工具提示”将自身定位在 div 的底部（或者更确切地说是从顶部开始的 100%).

例如，如果您想将“工具提示”放置在“字段容器div”的顶部，您需要在某些自定义设置中设置“top: 0”CSS class 或只需内联样式属性，如下所示：

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

看看这个 JSFiddle 的一些例子。

Bootstrap 5 工具提示位置无法使用数据属性进行表单验证

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

validation

tooltip

custom-data-attribute

bootstrap-5