CSS简单气泡提示制作教程

• 错误写法：.tooltip { position: absolute; }，而父元素没设定位
• 正确写法：

  .tooltip-wrapper {
    position: relative;
  }
  .tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

• 三角尖对齐锚点中心？靠 left: 50% + transform: translateX(-50%)，不是靠 margin-left

三角形怎么用伪元素画？border 技巧不能少

最轻量的方式是用 border 拼：把宽高设为 0，只留一个方向的 border 有颜色和宽度，其余设为 transparent。方向由哪边 border 非透明决定，比如下方气泡的三角，就让 border-top-color 有值，其他三边透明。

.tooltip::before {
  content: "";
  position: absolute;
  top: -8px; /* 三角尖顶到提示框上边缘 */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #333;
}

• 三角大小由 border 宽度决定，统一用 px，别混用 em/rem
• 如果提示框带圆角，三角尖位置要微调（比如 top: -7px），否则会露白边
• 不要给伪元素设 display: block —— 它默认就是，加了反而可能干扰

移动端点击触发时，气泡位置错乱怎么办？

常见于 iOS Safari 或某些安卓 WebView：滚动后点击，getBoundingClientRect() 拿到的位置没更新，或者 position: absolute 在缩放/滚动中偏移。根本原因不是 CSS，而是定位计算时机不对。

• 避免在 touchstart 里立刻计算位置，改用 touchend 或 click
• 如果用 JS 动态插入气泡，插入后强制重排：tooltip.offsetHeight（读取 layout 触发回流）
• 更稳妥的做法：不用 JS 计算位置，全靠 CSS 布局 —— 把提示框作为子元素嵌在触发元素内部，用 position: absolute + top/bottom 控制方向，靠父容器的 position: relative 锚定

复杂点在于三角方向响应式切换：上/下/左/右气泡共用一套样式时，::before 的 top/bottom/left/right 和 border 方向必须一一对应，漏掉一个就会翻车。

理论要掌握，实操不能落！以上关于《CSS简单气泡提示制作教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！