Hover Target
Generated CSS
CSS提示框在用户悬停或聚焦到元素时显示补充信息——无需JavaScript。标准方法在::before伪元素上使用position: absolute，默认通过opacity: 0; visibility: hidden隐藏，在:hover和:focus-visible时显示。
提示框可见性的根本挑战是display: none无法过渡。解决方案是将opacity和visibility结合使用。不透明度从0到1平滑过渡。visibility区分隐藏（不可交互）和可见，并接受过渡延迟——让你只在淡出完成后才让元素变为不可交互。
触发元素需要position: relative，使绝对定位的提示框包含在其坐标系统中。对于触发器上方的提示框，bottom: calc(100% + 10px)将其放置在触发器上边缘上方10px处。居中通过left: 50%; transform: translateX(-50%)处理。
在提示框出现时添加细微的方向性滑动使其感觉更响应、更精致。技术是在隐藏状态给提示框一个小偏移——例如transform: translateX(-50%) translateY(4px)——并在可见状态过渡到translateY(0)。
最易维护的实现使用CSS通过伪元素上的content: attr(data-tooltip)声明直接从HTML属性读取提示框内容。这意味着你在HTML中在触发器元素上设置data-tooltip="你的提示文本"。
鼠标悬停时立即出现的提示框可能令人烦恼——每次用户在界面上移动鼠标，提示框就会在每个经过的元素上闪现。在显示前添加300-500ms的延迟可以防止这种情况。
仅悬停的提示框对键盘用户不可访问。解决方法是在每个显示提示框的选择器中包含:focus-visible以及:hover。屏幕阅读器用户受益于通过aria-describedby将提示框文本作为无障碍描述提供。
最常见的提示框bug是提示框被带有overflow: hidden的父元素剪切。解决方案是：如果不需要，从祖先元素中删除overflow:hidden，或者使用JavaScript定位将提示框移出有问题的祖先。
提示框适合简短的补充文本，说明UI元素的作用。对于基本信息、交互内容或长篇说明，它们不是正确的选择。当内容比单个短语更丰富，或者需要在用户移开鼠标后仍然可见时，弹出框是合适的模式。
display: none立即将元素从渲染树中移除，无法过渡。opacity: 0使元素不可见但保留在布局中，并平滑过渡。visibility: hidden使元素不可交互同时保留在布局中。
在伪元素CSS中使用content: attr(data-tooltip)，并在HTML中的每个触发器元素上添加data-tooltip="你的文本"。你可以通过JavaScript更改data属性值来更改提示框文本，无需修改CSS。
不能可靠地工作。触屏设备没有悬停状态。对于触屏友好的提示框，使用JavaScript的点击切换方式，或使用专为鼠标和触摸交互设计的原生popover属性。
最简洁的纯CSS修复是从祖先元素中删除overflow: hidden（如果不需要）。如果布局需要overflow，则需要使用JavaScript将提示框附加到document.body来将其移出overflow边界。
提示框元素应该有role="tooltip"和一个id。触发器元素应该有aria-describedby指向提示框的id。这让屏幕阅读器在触发器获得焦点时将提示框文本作为附加描述播报。
只在从隐藏到可见方向的不透明度和可见性过渡中添加transition-delay值。显示方向使用300-500ms，隐藏方向不使用延迟。