bootstrap 5.3+ 才支持响应式 tooltip 字号，低于该版本需用 template 注入带断点 class 的容器并配合媒体查询或 clamp() 实现，同时须同步调整 .tooltip-arrow 边距与圆角处理，并注意 clamp() 兼容性及加载顺序。
Bootstrap 5.3+ 才支持响应式 Tooltip 字号
低于 5.3 版本（比如 5.2.3 或 4.x）写 fs-md-4 类完全无效——CSS 文件里压根没定义这些规则，浏览器直接忽略。先运行 console.log(bootstrap?.version) 确认版本。若不是 ≥5.3，别折腾类名，改用 template + 媒体查询。
用 template 注入自定义 class 控制断点字号
直接改 .tooltip-inner 在移动端常失效，因为 tooltip DOM 是 Popper 动态插在 底部的，你的样式可能被覆盖或没匹配到真实节点。最稳路径是用 template 注入带断点 class 的容器：
- 保留
.tooltip和.tooltip-inner这两个关键 class，否则定位崩坏 - 把自定义 class 加在外层，例如
class="tooltip tooltip-lg-on-md" - CSS 写成：
.tooltip-lg-on-md .tooltip-inner { font-size: clamp(0.875rem, 1.2vw, 1rem); }，或分媒体查询：@media (min-width: 768px) { .tooltip-lg-on-md .tooltip-inner { font-size: 1.125rem; } } - 如果用了
fs-{breakpoint}-*类，必须按断点从小到大写，fs-3 fs-md-4 fs-lg-2有效，fs-lg-2 fs-md-4会失效
边框响应式控制要同步箭头和内边距
.tooltip-inner 加 border 后，小三角（.tooltip-arrow）容易错位，尤其在不同断点下边框粗细变化时：
- 给
.tooltip-inner加border后，必须同步调整.tooltip-arrow的margin-top或margin-bottom，否则箭头悬空 - 边框圆角（
border-radius）超过0.25rem时，.tooltip-arrow不会被裁切，视觉割裂，建议用clip-path或重写箭头为伪元素 - 移动端慎用粗边框：默认
max-width: 200px，加边框后内容易撑破，优先用outline替代border避免布局偏移
最容易被忽略的兼容细节
clamp() 在 Safari ≤13.1 和旧版 IE 不支持，会 fallback 到最小值，看起来像“没变”；自定义根字号（如 :root { font-size: 18px; }）会破坏 clamp() 区间，导致小屏字反而变大。真正生效的前提只有三个：Bootstrap ≥5.3、CSS 在 bootstrap.min.css 之后加载、.tooltip-arrow 和 .tooltip-inner 的 class 名一个都不能少。
