Bootstrap 5 中卡片悬停提示需显式启用 Tooltip 组件，初始化须在 DOM 就绪后、引入 bootstrap.bundle.js，并设 data-bs-trigger="hover focus"；结构化内容应改用 Popover 并配 data-bs-html="true"。
卡片悬停显示更多内容，不能只靠 title 属性
直接写 title="提示文字" 在 Bootstrap 5 中完全不生效——它不是原生 tooltip，必须显式启用 Tooltip 组件。否则鼠标划过什么都不会出现。
常见错误是加了 data-bs-toggle="tooltip" 却没初始化 JS 实例，或者把初始化代码放在 <script></script> 标签里但没等 DOM 加载完就执行。
- 确保已引入
bootstrap.bundle.js（含 Popper 和 Tooltip 依赖） - 初始化必须在 DOM 就绪后进行：
document.addEventListener('DOMContentLoaded', () => { ... }) - 选择器要匹配到带
data-bs-toggle="tooltip"的元素，比如.card或内部按钮 -
title值不能为空格或null，且元素不能是disabled或display: none
data-bs-trigger="hover focus" 才能真正支持悬停
默认 data-bs-trigger 是 "click"，只点一下才弹出。想让鼠标移入就显示、移出就收起，必须显式设为 "hover focus"。
如果只写 hover，键盘用户无法聚焦访问，不符合无障碍要求；加 focus 后，Tab 键也能触发，语义和可用性都更完整。
- HTML 示例：
<div class="card" data-bs-toggle="tooltip" data-bs-trigger="hover focus" title="这是卡片的额外说明"> <li>不要用 <code>data-bs-trigger="manual"然后自己写 JS 控制——Tooltip 内部状态会混乱，容易重复绑定或漏销毁 - 移动端不支持 hover，所以这个设置在手机上自动降级为 click，无需额外处理
- HTML 示例：
<div class="card" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-html="true" data-bs-content="<strong>详情</strong><br><a href='#'>查看详情</a>"> <li> <code>data-bs-content里的 HTML 必须是单行字符串，引号要转义，复杂内容建议用data-bs-template配合自定义<template></template>标签 - Popover 默认宽度窄，可通过 CSS 调整
.popover-body的max-width或width - 别在
.card-body里直接初始化 Popover——它可能被父容器overflow: hidden截断，建议挂载在.card根节点上 - 扩大热区：给
.card加padding: 0.25rem（Bootstrap 自带类），或用cursor: pointer视觉提示可交互 - 防裁切：检查父容器是否设了
overflow: hidden，特别是用了.container-fluid或自定义 wrapper，必要时加position: relative; z-index: 10 - 首次失效：加
data-bs-delay='{"show": 100}'避免快速划过触发失败；或在初始化后手动调用show()测试是否绑定成功 - 暗色模式下文字看不清？Popover 默认用
.popover-body，需额外覆盖color和background-color，不能只靠 Bootstrap 的data-bs-theme="dark"（它对 Popover 支持有限）
卡片内显示结构化内容，得用 Popover 而非 Tooltip
Tooltip 只适合单行纯文本；一旦要放链接、按钮、图片或换行文字，就得换成 Popover——它是 Tooltip 的增强版，支持 HTML 内容。
Popover 初始化方式类似，但必须配 data-bs-html="true"，且内容通过 data-bs-content 或 data-bs-template 注入，不能直接塞进 title。
响应式与真实场景下的坑：悬停区域太小、内容被裁、首次不显示
卡片默认 padding 和 margin 会让悬停热区偏小，尤其在移动端点击时容易误触；Popover 容器若在 .row > .col 里，放大后可能被父层 overflow: hidden 切掉底部；首次悬停常有延迟或不显示，多因 JS 初始化时机或 CSS 渲染顺序问题。
data-bs-*，而是判断“更多内容”该不该悬停出现——它会不会遮住下方卡片？在 375px 宽度下是否撑破视口？用户扫一眼真能抓住重点，还是只会觉得干扰？这些没法靠代码自动解决，得真机测、多尺寸看、用户过一遍。
