Bootstrap如何实现带箭头的气泡提示框-Bootstrap教程-PHP中文网

bootstrap 5 tooltip 默认带箭头，但需正确初始化：触发元素须含 data-bs-toggle="tooltip" 和 title（或 data-bs-title），且必须执行 js 初始化；箭头方向由 data-bs-placement 控制，合法值为 "top"、"bottom"、"left"、"right"；未初始化会导致无箭头或不显示。

bootstrap 5 的 `tooltip` 默认就支持箭头，但必须正确初始化

bootstrap 5 的原生 tooltip 组件默认渲染带箭头的气泡提示框，**但前提是触发元素有 data-bs-toggle="tooltip" 和 title（或 data-bs-title）属性，且 js 已初始化**。没箭头？大概率是漏了 js 初始化这步。

常见错误现象：Tooltip 显示为纯色方块、无边框、无箭头，甚至完全不出现——多数是因为只写了 HTML，没调用 bootstrap.Tooltip。

确保已引入 Bootstrap 5 的 JS（含 Popper.js，CDN 版本已内置）

在 DOM 加载完成后执行初始化，例如：

document.addEventListener('DOMContentLoaded', () => {
  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipTriggerList.map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
})

不要手动写 CSS 覆盖 .tooltip .tooltip-arrow，除非你明确要定制形状；默认箭头由伪元素 ::before + ::after 叠加实现

箭头方向由 `data-bs-placement` 控制，不是 CSS 类

箭头指向哪边，取决于 data-bs-placement 属性值，和是否加 .tooltip-top 这类旧版类名无关（Bootstrap 5 已废弃这些类）。它直接影响箭头生成位置和提示框定位逻辑。

合法值只有："top"、"bottom"、"left"、"right"（大小写敏感）
placement: "top" → 箭头在下方，提示框在上方；反之亦然 —— 箭头永远“朝向”触发元素
若未设置，默认为 "top"，但实际行为可能受容器溢出约束自动翻转（例如靠近页面顶部时自动切到 "bottom"），这是 Popper 的智能防溢出机制，不是 bug

自定义箭头颜色或大小，得改 CSS 变量或覆盖伪元素

默认箭头颜色跟随 background-color，但无法通过 data-bs-custom-class 直接修改箭头样式，因为箭头是 .tooltip-arrow 内部的绝对定位伪元素，需要针对性覆盖。

VPS Bootstrap

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

下载

推荐方式：利用 Bootstrap 5 的 CSS 变量，在 :root 或组件作用域中设置：
```
:root {
  --bs-tooltip-bg: #2c3e50;
  /* 箭头会自动继承此背景色 */
}
```
如需单独调箭头大小，覆盖 .tooltip-inner 的 font-size 会影响整体尺寸，但更直接的是重写 .tooltip-arrow::before 的 border-width（默认为 .4rem）
注意：箭头由两层伪元素叠加构成（一层深色外边、一层主色内核），只改一层会导致视觉断裂

用 `data-bs-html="true"` 渲染富文本时，箭头仍有效，但需防 XSS

当提示内容含 HTML（比如加粗、换行），开启 data-bs-html="true" 后，箭头不会消失，Tooltip 仍正常定位并渲染箭头 —— 因为箭头是独立于内容的绝对定位结构。

必须同时设置 data-bs-html="true" 和 data-bs-title（不能只用 title 属性，后者会被 HTML 转义）

示例：

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<strong>注意</strong>：此项不可撤销" data-bs-placement="right">操作</button>

风险点：如果 data-bs-title 值来自用户输入，必须服务端过滤或前端 sanitize，否则存在 XSS 漏洞

箭头本身不难出现，难的是在动态插入元素、SPA 路由切换、或 Tooltip 被包裹在 transform 容器里时，Popper 的定位计算失效——这时箭头可能错位或消失，得手动调用 tooltip.update() 或检查父容器的 transform/perspective 样式。