bootstrap 5 中，浮动标签（form-floating）默认禁用 label 内部的 pointer-events，导致 tooltip 无法触发；只需为触发元素添加 `pe-auto` 类并初始化 tooltip 实例即可正常工作。
在 Bootstrap 5 的浮动标签表单（.form-floating）中，<label> 元素默认应用了 pointer-events: none 样式，这是为了确保用户点击 label 时能正确聚焦到关联的 <input>（而非误触 label 内容）。但这也导致嵌入在 <label> 中的按钮、图标等交互元素（如 tooltip 触发器）无法响应鼠标事件，Tooltip 始终不显示。
✅ 正确解决方案是：显式启用指针事件。只需为 tooltip 触发元素（例如 <button>）添加 pe-auto 工具类（即 pointer-events: auto），或直接加在 <label> 上（推荐加在触发器上，更精准）。
同时，务必通过 JavaScript 初始化 Tooltip——Bootstrap 5 不再自动初始化 data 属性绑定的组件（除非使用 bundle 版本且已启用 Popper），需手动调用：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<!-- 必须引入 Bootstrap CSS 和 JS（含 Popper） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="form-floating mb-3">
<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 ms-1"
type="button"
data-bs-toggle="tooltip"
title="请输入公司邮箱，用于接收系统通知">
?
</button>
</label>
</div>
<script>
// 初始化所有 tooltip（建议放在 DOMContentLoaded 或页面底部）
document.addEventListener('DOMContentLoaded', function () {
const tooltipTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
});
</script>? 小贴士：
- pe-auto 是 Bootstrap 5 内置的实用类，等价于 pointer-events: auto；避免使用内联 style="pointer-events:auto"，以保持语义清晰和可维护性；
- 若 tooltip 内容含 HTML（如换行、链接），需设置 data-bs-html="true" 并在初始化时启用 html: true 选项；
- 不建议将 tooltip 绑定在 <label> 标签本身（即使加 pe-auto），因为其尺寸与浮动动画耦合，易引发定位偏移；推荐使用轻量级 <button> 或 <span> 作为触发器，并配合 ms-1 等间距类优化视觉节奏；
- 如需支持键盘访问（无障碍），可为按钮添加 aria-label，例如 aria-label="关于邮箱格式的帮助信息"。
通过以上配置，你就能在保持 Bootstrap 5 浮动标签优雅交互动效的同时，安全、稳定地集成上下文提示功能。
