问题描述
使用 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 中,如何使用数据属性修改验证工具提示的位置?
解决方法
这是一个很难回答的问题,但我会尝试。
文档中描述的用于表单验证的 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 中的一些示例。