如何为Bootstrap 5浮动标签表单添加提示框（Tooltip）？

你的问题核心原因是Bootstrap默认给浮动标签（.form-floating label）设置了pointer-events: none——这个样式是为了让点击标签时能直接聚焦到对应输入框，但同时会导致标签内部的交互元素（比如你的提示按钮）无法接收鼠标事件，所以提示框（Tooltip）触发不了。

解决方法分两步：

1. 开启标签的指针事件 #

添加自定义CSS，允许包含交互元素的浮动标签接收鼠标事件：

.form-floating .label-with-interactive {
  pointer-events: auto;
}

2. 修改HTML并初始化组件 #

给浮动标签加上上面的自定义类，同时确保正确初始化Bootstrap的Tooltip/Popover：

示例HTML（Tooltip） #

<div class="form-floating">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput" class="label-with-interactive">
    Email address 
    <button class="btn badge text-bg-primary ms-1" type="button" data-bs-toggle="tooltip" title="请输入常用电子邮箱，我们会发送验证信息到此处">
      提示
    </button>
  </label>
</div>

初始化Tooltip的JS代码 #

// 页面加载完成后初始化所有Tooltip
document.addEventListener('DOMContentLoaded', function() {
  const tooltipTriggers = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  tooltipTriggers.forEach(trigger => {
    new bootstrap.Tooltip(trigger);
  });
});

扩展到弹出框（Popover） #

如果要用Popover，只需要把Tooltip的属性换成Popover的配置即可，比如：

<button class="btn badge text-bg-primary ms-1" type="button" 
        data-bs-toggle="popover" 
        title="弹出框标题" 
        data-bs-content="这里是弹出框的详细说明内容">
  更多说明
</button>

对应的初始化代码换成Popover：

document.addEventListener('DOMContentLoaded', function() {
  const popoverTriggers = document.querySelectorAll('[data-bs-toggle="popover"]');
  popoverTriggers.forEach(trigger => {
    new bootstrap.Popover(trigger);
  });
});

这样处理后，浮动标签里的提示框/弹出框就能正常触发了。

内容的提问来源于stack exchange，提问作者J. Patrick Moran