最稳妥方案是用:hover伪类配合display或visibility控制显隐：display兼容性好但触发重排，visibility保留占位不跳动；需同父容器、定位时父元素须设position: relative。
直接用 :hover 伪类 + display 或 visibility 控制显隐最稳妥，别一上来就写 JavaScript。
用 :hover 配合 display 实现基础悬停显示
这是最常用、兼容性最好（IE9+）、性能最轻量的做法。核心是把要显示的文字默认设为 display: none，鼠标移入父容器时设为 display: block（或其他合适值）。
- 必须把悬停触发元素（如按钮、链接）和待显示文字放在同一父容器内，否则
:hover无法跨元素生效 -
display切换会触发重排（reflow），如果内容频繁进出且布局敏感，可能有轻微抖动 - 示例结构：
<div class="tooltip-trigger"> 悬停我 <span class="tooltip-text">这是提示文字</span> </div>
对应 CSS：.tooltip-text { display: none; } .tooltip-trigger:hover .tooltip-text { display: block; }
用 :hover 配合 visibility 避免布局跳动
当提示文字尺寸固定、或你希望保留占位空间（比如防止下方内容上移），改用 visibility 更合适。它只影响可见性，不触发布局重排。
-
visibility: hidden元素仍占据文档流空间，visibility: visible恢复显示 - 不能用
opacity: 0替代 —— 它虽然视觉隐藏，但默认仍响应鼠标事件，会导致悬停状态“黏住” - 若需淡入效果，可加
transition: visibility 0.1s, opacity 0.2s，但注意visibility本身不能过渡，得配合opacity和 JS 控制时机
为什么不用 title 属性或纯 JavaScript？
title 是浏览器原生提示，样式完全不可控、延迟高、移动端基本不触发；而手写 JS 做悬停提示，除非要支持箭头定位、跟随鼠标、异步加载内容等高级功能，否则纯属增加复杂度和出错点。
- 原生
title的提示框无法修改字体、颜色、圆角、阴影，也不能加图标或换行 - JS 方案容易忽略
focus/blur（键盘访问）、touchstart（移动端）、悬停离开后延迟隐藏等细节 - 简单提示场景下，CSS 方案零 JS、无依赖、加载即用，维护成本几乎为零
真正要注意的其实是定位：如果提示文字需要精确出现在目标元素右上方或底部居中，就得用 position: absolute 配合 top/left，此时父容器必须设 position: relative —— 这个限制很容易被忽略，导致提示文字飘到页面左上角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
