气泡提示框定位结构应为嵌套式：.tooltip设position: relative作包裹容器，.tooltip-content用position: absolute定位内容，.tooltip-arrow作为其子元素用position: absolute配合border三角法（如border-bottom: 6px solid #333）画箭头，并通过top/left与transform微调位置。
气泡提示框的定位结构怎么搭？
气泡提示框本质是「主容器 + 箭头元素」两个 DOM 节点配合定位。不能只靠 position: absolute 把箭头硬塞到容器边缘——那样会脱离文档流、无法随内容自适应，且在响应式场景下极易错位。
推荐用嵌套结构：.tooltip 作为相对定位的包裹容器，.tooltip-content 是绝对定位的内容区，.tooltip-arrow 是子元素，用 position: absolute 相对于父容器定位：
<div class="tooltip">
<span>悬停我</span>
<div class="tooltip-content">
这是提示文字
<div class="tooltip-arrow"></div>
</div>
</div>这样箭头能继承父容器的尺寸上下文，也方便后续通过 transform 微调位置。
箭头怎么画才不依赖图片或 SVG？
纯 CSS 画三角形最稳的方式是利用边框色叠加：设一个无宽高的元素，只给单边 border（比如 border-top），其余三边透明，就能生成指向特定方向的三角。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
width和height必须为0 - 四个
border值中，仅一个设颜色，其余为transparent - 边框宽度决定三角大小（如
border-top: 6px solid #333生成向上指的 6px 高三角）
示例（向下指的箭头）：
.tooltip-arrow {
position: absolute;
top: -6px;
left: 12px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333;
}注意：若用 border-top 向上指，top 值需为负；向右指则用 left 负值 + border-left；方向和边框属性必须严格对应。
箭头位置总对不准？检查这三处
箭头偏移失效通常不是 CSS 写错了，而是定位基准没理清：
-
.tooltip-content是否设置了position: relative？如果没设，.tooltip-arrow会向上逐级找最近的相对/绝对定位祖先，很可能跑到页面顶部去 -
top/left值是否基于内容区尺寸估算？比如内容高度变化时，箭头垂直居中要用top: 50%+transform: translateY(-50%)，而不是写死像素值 - 是否忽略了
box-sizing？如果.tooltip-content有padding但box-sizing: content-box（默认），那width/height不包含内边距，箭头横向居中要用left: calc(50% - 6px)扣除三角底边宽度的一半，而非简单left: 50%
移动端适配和可访问性容易漏什么？
气泡提示框在触摸设备上不能只依赖 :hover，否则 iOS 用户点不开；同时屏幕阅读器可能忽略纯视觉提示。
必须处理：
- 用
focus和focus-within补全键盘焦点支持，例如.tooltip:focus-within .tooltip-content - 添加
role="tooltip"到提示内容区，并用aria-describedby关联触发元素 - 移动端建议加
touch-action: manipulation防止延迟响应 - 避免把
font-size写死为px，改用rem或em，否则缩放时箭头和文字比例会崩
箭头本身不需要 aria 属性，但它的颜色对比度必须满足 WCAG 4.5:1（尤其深色背景上的浅灰箭头），否则视觉障碍用户可能看不见指示方向。
