Bootstrap怎么修改Tooltip提示框的字体行高及内边距样式-Bootstrap教程-PHP中文网

直接改 .tooltip-inner 的 font-size 和 line-height 无效，因 Bootstrap Tooltip 由 Popper.js 动态插入底部，易被覆盖；应确保自定义 CSS 在 bootstrap.min.css 后加载，使用更具体选择器（如 body .tooltip .tooltip-inner）或通过 template 选项注入自定义 class（如 .my-tooltip-lg .tooltip-inner），并同步调整 .tooltip-arrow 的 margin-top 或 transform 以修正箭头偏移。

bootstrap怎么修改tooltip提示框的字体行高及内边距样式

直接改 `.tooltip-inner` 的 `font-size` 和 `line-height` 为什么没反应

因为 Bootstrap Tooltip 的 DOM 是 Popper.js 动态插入到底部的，你写的 .tooltip-inner { font-size: 16px; } 很可能被 Bootstrap 自带样式覆盖——尤其当你的 CSS 在 bootstrap.min.css 之前加载，或选择器权重不够时。即使加了 !important，也可能因渲染节点不在当前上下文（比如写在组件 scoped style 里）而失效。

用 `template` 选项注入自定义 class 最可靠

这是绕过样式覆盖、精准控制字体和行高的首选方式。它让你完全掌控结构，同时保留 Popper 定位所需的关键 class。

必须保留 .tooltip 和 .tooltip-inner，否则定位逻辑会中断
把自定义 class 加在外层容器上，例如 class="tooltip my-tooltip-lg"
对应写 CSS：.my-tooltip-lg .tooltip-inner { font-size: 16px; line-height: 1.5; padding: 0.5rem 0.75rem; }
示例初始化：

const tooltip = new bootstrap.Tooltip(element, {
  template: '<div class="tooltip my-tooltip-lg" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"></div>
</div>'
});

改了 `line-height` 或 `padding` 后小三角偏移怎么办

.tooltip-arrow 的位置是靠固定 top/bottom 值 + margin-top/margin-bottom 计算的，一旦 .tooltip-inner 高度变化，箭头就会错位。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

如果 line-height 从 1.2 改成 1.6，建议同步调整 .tooltip-arrow 的 margin-top（对 bs-tooltip-top）或 margin-bottom（对 bs-tooltip-bottom）
更稳妥的做法：统一用 transform: translateY() 微调，比如 .my-tooltip-lg .tooltip-arrow { margin-top: 0; transform: translateY(-4px); }
别只调 padding，max-width 和 white-space 也要配合：推荐 white-space: normal; word-break: break-word;，避免长文本撑破布局

移动端长按场景下字体样式怎么保持一致

移动端触发方式改为 trigger: 'manual' 后，Tooltip 完全脱离自动生命周期，但样式规则依然生效——前提是你的自定义 class 已通过 template 注入，且 CSS 文件加载顺序正确。

确保自定义 CSS 在 bootstrap.min.css 之后加载
避免用 em 或 rem 做绝对字号控制，改用 px 或响应式 clamp()，例如 font-size: clamp(12px, 0.875rem, 14px);
如果用了暗色模式，记得单独定义 .my-tooltip-lg.dark-mode .tooltip-inner，因为 .tooltip-arrow 默认继承背景色，但有时需显式设 border-color