直接修改 .tooltip-inner 样式常失效，因 bootstrap 4 tooltip 由 popper.js 动态插入 底部，脱离原样式上下文；应将自定义 css 置于 bootstrap css 之后，用 body .tooltip .tooltip-inner 或 template 注入自定义 class（如 .my-tooltip-lg）提升权重并确保定位与箭头协同。

直接改 .tooltip-inner 样式大概率失效，因为 Bootstrap 4 的 Tooltip 是由 Popper.js 动态插入到 底部的独立 DOM 节点，不继承触发元素的样式上下文，也不受普通局部 CSS 权重保护。

为什么 .tooltip-inner { font-size: 14px; } 没反应

常见错误现象：

• 写了样式但悬停后仍是默认字号/行高/边框
• 加了 !important 还是无效 → 很可能 CSS 文件加载顺序错位（你的样式在 bootstrap.min.css 之前）
• 用浏览器开发者工具检查发现渲染出的 <div class="tooltip-inner"> 确实没应用你的规则 → 说明选择器权重不够或作用域没覆盖到 <code> 下的真实节点

  根本原因：Tooltip 的 HTML 结构不在原始 HTML 文档流中，而是在 末尾动态生成，所以 .tooltip-inner 必须能匹配到那个位置的元素。推荐做法是把自定义 CSS 放在 Bootstrap CSS 之后，并用带上下文的选择器提升权重：

  • 用 body .tooltip .tooltip-inner 替代单纯 .tooltip-inner
  • 避免只依赖类名，尤其不要在 scoped style 或 Shadow DOM 里写这种规则

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

  这是绕过全局样式污染、支持多套主题、响应式适配的首选方式。关键点是：保留 .tooltip 和 .tooltip-inner 这两个核心 class（否则 Popper 定位会崩），仅在外层容器加自定义 class。

  示例：为大号提示框单独定制

  

  VPS Bootstrap

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

  下载

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

  对应 CSS（必须放在 Bootstrap CSS 之后）：

  .my-tooltip-lg .tooltip-inner {
    font-size: 16px;
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    max-width: 280px;
  }
  .my-tooltip-lg .tooltip-arrow {
    margin-top: -0.25rem; /* 同步修正箭头偏移 */
  }
  

  • 修改 line-height 或 padding 后，.tooltip-arrow 的 margin-top / margin-left 必须手动调，否则小三角会错位
  • 若要支持 HTML 内容，data-html="true" 仍需开启，且确保 white-space: normal 或 word-break: break-word 配合 max-width

  改边框和圆角时要注意箭头颜色匹配

  .tooltip-inner 加 border 不是简单设置就完事——箭头（.tooltip-arrow）本身是靠 border 实现的三角形，它的颜色必须和 .tooltip-inner 的边框/背景色协调，否则出现“断开感”。

  不同方向的箭头依赖不同边的 border 颜色：

  • .bs-tooltip-top .tooltip-arrow → 用 border-bottom-color
  • .bs-tooltip-bottom .tooltip-arrow → 用 border-top-color
  • .bs-tooltip-left .tooltip-arrow → 用 border-right-color
  • .bs-tooltip-right .tooltip-arrow → 用 border-left-color

  推荐统一处理（以顶部为例）：

  body .tooltip.my-tooltip-bordered .tooltip-inner {
    border: 1px solid #4a5568;
    border-radius: 0.375rem;
    background-color: #f7fafc;
  }
  .bs-tooltip-top .tooltip-arrow {
    border-bottom-color: #4a5568;
  }
  

  真正麻烦的不是写几行 CSS，而是每次调整 font-size、padding 或 border，都得同步动 .tooltip-arrow 的 margin 和 border-color —— 这个联动关系容易被忽略，一疏忽就导致箭头悬空或错色。