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"

研究：

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

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

1 个答案: