Bootstrap怎么修改Tooltip提示框的字体行高和间距-Bootstrap教程-PHP中文网

直接修改 .tooltip-inner 的 font-size 和 line-height 无效，因 bootstrap tooltip 由 popper 动态插入底部，易被原生 css 覆盖或受局部作用域限制；应通过 template 注入自定义 class（如 my-tooltip-lg）并确保其 css 在 bootstrap 后加载，同时同步调整 .tooltip-arrow 的 margin 以匹配文字尺寸变化。

bootstrap怎么修改tooltip提示框的字体行高和间距

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

因为 Bootstrap Tooltip 的 DOM 是 Popper.js 动态插入到底部的，你写的 .tooltip-inner { line-height: 1.8; } 很可能被 Bootstrap 原生 CSS 覆盖——尤其当你的样式表在 bootstrap.min.css 之前加载，或选择器权重不够。浏览器开发者工具里能看到真实节点带 class="tooltip"，但它不在你原始 HTML 结构里，所以局部作用域样式根本匹配不上。

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

这是控制字体、行高、字间距的首选方式：绕开全局样式污染，精准命中目标节点，且不影响 Popper 定位逻辑。

Bootstrap

Bootstrap 5.3.8 编译版包含可直接用于项目的 CSS、JavaScript 和插件文件，适合快速搭建响应式网页。

下载

必须保留 .tooltip、.tooltip-arrow、.tooltip-inner 这三个 class，否则定位失效
把自定义 class 加在外层容器上，比如 class="tooltip my-tooltip-lg"
对应写 CSS：.my-tooltip-lg .tooltip-inner { font-size: 15px; line-height: 1.6; letter-spacing: -.02em; }

示例代码：

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>'
});

`letter-spacing` 没有 Bootstrap 响应式工具类

Bootstrap 官方 utility 集合里压根没提供 ls-sm 或类似类——无论 sm、md 还是 xl 断点，都得自己写。

简单场景可用内联 style：<span style="letter-spacing: -.05em;">标题</span>
推荐方案：在自定义 CSS 中定义断点类，例如：.ls-md { letter-spacing: 0; } + @media (min-width: 768px) { .ls-md { letter-spacing: 0; } }
别用 text-center 等对齐类凑字间距效果——它们和 letter-spacing 无关

改了 `line-height` 后箭头偏移怎么办

.tooltip-arrow 的位置依赖 .tooltip-inner 的尺寸和 padding，一旦 line-height 或 font-size 变动，三角形容易上下错位。

同步调 .tooltip-arrow 的 margin-top（bottom 方向）或 margin-bottom（top 方向）
若用了 template，建议给箭头也加自定义 class，比如 class="tooltip-arrow my-tooltip-arrow"，再单独控制
常见坑：只改 .tooltip-inner 的 padding 却忘了调整箭头 margin，导致小三角“悬空”或贴边