标签本身不支持悬浮提示，需用title属性或aria-label配合css/js实现；推荐外层包裹添加提示，避免直接操作元素。
ruby 标签本身不支持悬浮提示
HTML 的 <ruby></ruby> 是专为东亚文字注音设计的语义标签，比如日文假名或中文拼音，它没有交互能力，也不会响应鼠标悬停。想实现“文字上方悬浮提示”，本质是需要 CSS 或 JavaScript 驱动的 tooltip 行为，和 <ruby></ruby> 的语义功能无关。
用 title 属性最简实现“悬停显示”
如果只是需要浏览器原生的、轻量级的悬浮提示（无样式定制），直接给任意元素加 title 属性即可，包括 <ruby></ruby> 内部的 <rb></rb> 或 <rt></rt> —— 但注意：只有被渲染为可交互区域的元素才会触发 title 提示，而 <rt></rt> 默认是小号、上标、不可聚焦的，多数浏览器不会对其触发 title。稳妥做法是把 title 加在包裹层上：
<span title="这是悬浮说明"><ruby><rb>汉</rb><rt>hàn</rt></ruby></span>
这样悬停整个“汉”字区域时，会显示提示。缺点是样式不可控、延迟固定、无法选中内容。
用 aria-label + CSS tooltip 实现可定制提示
若需自定义位置（如严格显示在文字正上方）、样式、动画或支持键盘访问，得用现代 tooltip 方案。关键点：
-
aria-label或data-tooltip存提示文本，不依赖title - 用
position: relative包裹文字，position: absolute定位提示框 - 触发方式建议用
:hover+:focus-within，兼顾鼠标与键盘 - 避免把提示框放在
<rt></rt>内部——它的盒模型受 ruby 布局约束，定位难控制
示例结构：
<span class="tooltip-trigger" aria-label="汉字‘汉’的普通话读音"> <ruby><rb>汉</rb><rt>hàn</rt></ruby></span>
对应 CSS 中用 ::before 或额外 <span class="tooltip"></span> 实现浮层，定位时 top 设为负值（如 top: -2em）才能真正压在文字上方。
ruby 和 tooltip 混用时的兼容性陷阱
某些旧版 Safari（≤15.4）和部分屏幕阅读器对嵌套在 <ruby></ruby> 中的 ARIA 属性支持不稳定；<rt></rt> 元素本身不能设 tabindex 或接收焦点，所以别试图让它成为 tooltip 触发主体。更可靠的做法是：
- 把
<ruby></ruby>当纯展示容器，tooltip 逻辑完全由外层<span></span>承担 - 测试时重点检查 VoiceOver 和 NVDA 下是否能正确朗读
aria-label - 避免在
<rt></rt>上写display: block或强行修改 ruby 布局，会破坏注音对齐
真正麻烦的不是怎么让提示出现，而是确保它在不同缩放比例、高对比度模式、以及辅助技术下依然可发现、可理解、不遮挡注音关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
