Bootstrap 5工具提示位置不适用于具有数据属性的表单验证

Question

使用tooltip form validation 阅读文档，它出现在输入下方。当我阅读有关 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" 

研究：

• 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

在 Bootstrap 5 中，如何使用数据属性修改验证工具提示的位置？

Answer 1

这是一个复杂的问题，但我会尝试。

文档中描述的用于表单验证的Tooltips 方法没有利用ToolTips API ...它只是使用它的样式作为颜色和形状。

它的工作原理是使用“~”（紧接在前面）CSS 选择器，最初设置为“display: none”。一旦表单验证，它会使用CSS :valid selector 触发样式。所以“工具提示”必须紧跟在表单元素之前（input 或其他任何元素）。

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

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

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

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

<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 中的一些示例。