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

直接改 .tooltip-inner 的 font-size 和 line-height 无效，因 tooltip dom 由 popper 动态插入底部，易被 bootstrap 高权重样式覆盖；须用 template 注入自定义 class（如 my-tooltip-lg）并确保保留 .tooltip 和 .tooltip-inner，再通过 .my-tooltip-lg .tooltip-inner 精准控制样式，同时同步调整 .tooltip-arrow 的 margin-top/margin-bottom 防偏移。

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

直接改 `.tooltip-inner` 的 `font-size` 和 `line-height` 为什么无效

因为 Bootstrap 5+ 的 Tooltip DOM 是由 Popper 动态插入到底部的，不在原始 HTML 结构里。你写的 .tooltip-inner { line-height: 1.6; } 很可能被 Bootstrap 自带样式覆盖——要么加载顺序错（你的 CSS 在 bootstrap.min.css 之前），要么选择器权重不够（Bootstrap 用的是 .tooltip.show .tooltip-inner 这类高权重规则）。

用 `template` 注入自定义 class 是最稳的写法

它绕开全局样式污染，让你精准控制每个 Tooltip 的结构和样式，且不影响 Popper 定位逻辑。

VPS Bootstrap

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

下载

必须保留 .tooltip 和 .tooltip-inner 这两个 class，否则定位或内容渲染会出问题
把自定义 class 加在外层容器上，比如 class="tooltip my-tooltip-lg"
对应写 CSS：.my-tooltip-lg .tooltip-inner { font-size: 16px; line-height: 1.5; padding: 8px 12px; }

示例初始化代码：

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` 改了，小三角箭头位置偏移怎么办

.tooltip-arrow 的垂直位置依赖 .tooltip-inner 的 line-height 和 padding。一旦你调大行高或内边距，箭头就容易上下错位。

常见现象：文字变高后，箭头浮在文字上方或沉到下方
解决方法：同步调整 .tooltip-arrow 的 margin-top（对 .tooltip.top）或 margin-bottom（对 .tooltip.bottom）
例如：.my-tooltip-lg .tooltip.top .tooltip-arrow { margin-top: -8px; }（数值需根据实际 line-height + padding 推算）
别只改 top 或 bottom 值——Popper 计算的是整体尺寸，margin 才是校准关键

移动端长按场景下，`padding` 和 `max-width` 要特别注意

手机屏幕窄，文字换行频繁，硬设 max-width: 200px 容易撑破布局或截断内容。

推荐用 white-space: normal; word-break: break-word; 替代固定宽度
padding 建议设为偶数（如 8px、12px），避免在高 DPI 屏幕下出现半像素模糊
如果用了 trigger: 'manual' 配合 touchstart，记得在 show() 前确保 tooltip 实例已启用：tooltip.enable()
忘了重置 .tooltip-arrow 的 background-color？它默认不继承 .tooltip-inner 背景，得单独设，否则暗色主题下会突兀