HTML中如何实现纯CSS的工具提示气泡-html教程-PHP中文网

title属性无法自定义样式、动画和内容结构，且移动端基本不触发；纯CSS气泡需用data-tooltip存内容，配合::before/::after伪元素定位绘制，并依赖position:relative父容器建立定位上下文。

html中如何实现纯css的工具提示气泡

工具提示气泡为什么不能只靠 `title` 属性

title 是浏览器原生支持的提示，但无法自定义样式、动画、内容结构，且移动端基本不触发。纯 CSS 工具提示必须脱离 title，用 data-* 存内容 + ::before/::after 生成气泡。

核心实现：用 `data-tooltip` + `:hover` 触发显示

把提示文字存在属性里，避免污染 DOM 结构；用伪元素画气泡和箭头，靠 position: absolute 定位。关键点在于父容器必须是 position: relative，否则绝对定位会脱出上下文。

常见错误现象：::after 气泡没出现、位置飘到页面左上角、鼠标移开后残留——基本都是定位上下文缺失或 display: none 没配对导致的。

必须给触发元素（如 <span></span> 或 <button></button>）加 position: relative
气泡用 ::before 画主体，::after 画小三角，两者都设 content: attr(data-tooltip)
用 opacity + transition 实现淡入，别只用 display: none/block（它无法过渡）

.tooltip {
  position: relative;
}
.tooltip::before,
.tooltip::after {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}
.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 10;
}
.tooltip::after {
  content: '';
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: #333;
}

移动端适配和焦点可访问性怎么补

CSS 的 :hover 在触摸设备上不可靠，且键盘用户无法用 Tab 进入提示。必须补充 :focus 和 :focus-within，并允许用户按 Esc 关闭（这需要 JS，但“纯 CSS”方案本身无法做到关闭逻辑，只能退而求其次让焦点停留时保持可见）。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

性能影响：大量使用 transform 和 opacity 是 GPU 友好的，但若气泡内含图片或复杂 HTML，建议用 will-change: opacity 提前提示渲染引擎。

为可聚焦元素（如 button、a[href]）加 tabindex="0"
在 CSS 中追加 .tooltip:focus::before, .tooltip:focus::after 规则
避免在 body 上用 *:hover 全局代理，iOS Safari 会禁用所有 hover 样式

箭头方向错位、文字换行、z-index 被遮挡怎么办

气泡箭头方向由 bottom/top/left/right 和 transform 共同决定，微调常需试值；多行文本会撑开 ::before，但 white-space: nowrap 又容易溢出；z-index 失效往往是因为父级有 transform 或 filter 创建了新层叠上下文。

箭头偏移：改 bottom: 120% → 115% 或调整 transform: translateX(-50%) 中的百分比
多行支持：删掉 white-space: nowrap，加 max-width: 200px 和 word-break: break-word
z-index 失效：检查父容器是否用了 transform、opacity 、<code>filter，这些都会隐式创建层叠上下文，把气泡锁在局部层级里