HTML无原生气泡组件，所谓气泡均为CSS模拟；原生表单验证气泡仅WebKit支持且不可控；常见不显示/遮挡问题源于absolute定位、z-index不足、overflow/transform裁剪及DOM计算时机错误；title属性是轻量兜底方案；自定义气泡应采用fixed定位+动态计算+边缘避让。
HTML 本身没有原生的“气泡消息提示”组件，所谓“气泡”都是用 CSS 模拟出来的视觉效果，而浏览器唯一真正支持的、带自动定位和交互逻辑的“气泡”，只有表单验证失败时的 ::-webkit-validation-bubble（仅 WebKit 内核）——但它不可控、不跨浏览器、不能手动触发，也不适用于非表单场景。
为什么你写的气泡不显示或被遮挡
常见现象是：点击按钮后气泡没弹出、弹出但位置偏移、被 Dialog/Popup/Modal 盖住、滚动后消失、响应式下错位。
- 根本原因不是“HTML 不支持”，而是你用了
position: absolute或float布局，导致气泡脱离文档流，无法跟随目标元素重定位 - 层级问题：气泡
z-index小于父容器（比如dialog默认z-index: 1000），又没显式设置更高值 - 父容器设置了
overflow: hidden或transform，会裁剪掉绝对定位的气泡 - 在 Vue/React 中直接操作 DOM 插入气泡，但没等组件更新完成就计算位置，导致
getBoundingClientRect()取到错误坐标
用 title 属性是最轻量的兜底方案
它不是“气泡”，但能立刻解决“需要提示文字”的刚需，且完全原生、无障碍友好、无需 JS、无兼容性问题。
- 只对有交互行为的元素生效（
input、button、a、img等），div上加title无效 - 文案不可样式化，也不能加图标或按钮，但胜在稳定可靠
- 移动端上部分浏览器（如 iOS Safari）默认不触发
title，需额外监听touchstart并模拟 tooltip - 如果只是临时调试或内部工具，
title="调试中：用户未登录"比写一整套 Popup 更快
真要自定义气泡，必须用 position: fixed + 动态计算
别再用 absolute 跟随某个父容器了。现代做法是把气泡挂到 document.body 下，用 fixed 定位，再通过 JS 实时读取目标元素位置并更新气泡 top/left。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 监听
scroll和resize事件，否则滚动后气泡悬空 - 用
getBoundingClientRect()获取目标元素视口坐标，不是offsetTop - 避让屏幕边缘：计算
right和bottom，若超出则反向偏移（比如气泡本该在右下，但右侧空间不够，就改左下） - Vue 场景下，用
v-show而非v-if控制显隐，避免频繁销毁重建导致定位失效 - 鸿蒙 ArkTS 中，
Popup组件已内置避让逻辑，直接传target元素引用即可，不用自己算
表单校验气泡被禁用？先查这三件事
如果你本意是让 required 或 type="email" 失败时弹红气泡，却什么都没看到，大概率卡在这几个地方：
-
input没包在<form></form>标签里，或缺失name属性 → 浏览器直接跳过校验 - 提交按钮是
<button type="button"></button>，不是submit，或 JS 里调了event.preventDefault()却没补form.reportValidity() - CSS 干扰了原生气泡：全局写了
* { pointer-events: none; }，或重置了::-webkit-validation-bubble，或父容器有transform
最稳妥的做法是放弃依赖原生气泡，改用 setCustomValidity() + reportValidity() 主动触发，并配合自定义错误区域显示文案——这样可控、可测试、可无障碍。
