英文:
How to Add Tooltips to Bootstrap 5 Floating Labels Form?
问题
可以在 Bootstrap 5 浮动标签文本上添加工具提示或弹出框吗？
我有一个使用浮动表单字段的表单，我想使用工具提示或弹出框功能向特定的表单字段添加说明。我可以在标准表单实现（非浮动）上使其工作，但在使用浮动标签时却不行。
这是否可以实现？如何实现？
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">
电子邮件地址 <button href="#" class="btn badge text-bg-primary" type="button" data-bs-toggle="tooltip" title="提示标题！">工具提示</button>
</label>
</div>
英文:
Is it possible to add tooltips or popovers to Bootstrap 5 floating labels text?
I have a form that uses floating form fields and I want to add instructions to certain form fields using the tooltip or popovers functionality. I can get it to work on the standard form implementation (non-floating), but not when I use floating labels.
Can this be done? How?
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">
Email address <button href="#" class="btn badge text-bg-primary" type="button" data-bs-toggle="tooltip" title="Tooltip Title!">Tooltip</button>
</label>
</div>
答案1
得分: 1
将pe-auto类添加到<label>或具有工具提示的元素上（在本例中是<button>），以允许指针事件。
英文:
Add the pe-auto class to the <label> or the element with the tooltip (in this case, the <button>) to allow pointer events.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
new bootstrap.Tooltip(document.querySelector('[data-bs-toggle="tooltip"]'));
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">
Email address <button class="btn badge text-bg-primary pe-auto" type="button" data-bs-toggle="tooltip" title="Tooltip Title!">Tooltip</button>
</label>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论