纯CSS提示框生成器 - 鼠标悬停气泡代码

纯CSS提示框是利用CSS伪元素（::after和::before）配合:hover伪类实现的悬浮提示效果，无需任何JavaScript。其核心优势包括：
✅ 零依赖：不依赖JS，加载速度更快，兼容性更好。
✅ 轻量高效：仅需几行CSS代码，不增加页面负担。
✅ SEO友好：提示文字通过data-tooltip属性传递，不影响页面结构。
✅ 易于维护：样式统一管理，修改方便。
✅ 支持键盘访问：结合:focus伪类，提升可访问性。

使用本工具，您可以通过可视化界面实时调整：
📍 位置：支持8个方向（上、下、左、右及四个角落），自动计算CSS定位。
🎨 颜色：自定义背景色和文字颜色，匹配您的品牌风格。
📐 尺寸：调整圆角、字号、箭头大小等细节。
✨ 动画：选择淡入、缩放、滑入等过渡效果。
所有修改会实时预览并自动生成对应CSS代码。

attr() 是CSS中的内置函数，可以读取HTML元素的属性值并用于样式。在Tooltip中：
content: attr(data-tooltip); 会读取元素的data-tooltip属性值作为伪元素的文本内容。

例如：<span data-tooltip="删除">🗑️</span>
悬停时，::after伪元素会显示"删除"文字。

⚠️ 注意：目前attr()仅能用于content属性，不能直接用于其他CSS属性（如颜色、尺寸等）。CSS Level 5草案中已提出扩展支持，但浏览器尚未完全实现。

触屏设备没有:hover状态，这是纯CSS Tooltip的固有限制。解决方案：
📱 方案一：使用:active伪类作为补充（点击时显示），但体验有限。
📱 方案二：在移动端使用JavaScript点击事件触发Tooltip。
📱 方案三：使用CSS媒体查询，在移动端将Tooltip改为内联说明文字。
📱 推荐：对于移动端关键交互，建议结合轻量JS实现更可靠的提示方案。

✅ 开箱即用：复制生成的HTML和CSS代码到您的项目中即可使用，无需额外依赖。

🌐 浏览器兼容性：
• Chrome / Edge / Firefox / Safari 全系支持
• iOS Safari 12+ 完全支持
• Android Chrome / Firefox 完全支持
• IE11 基本支持（部分动画效果可能降级）

使用到的CSS特性（伪元素、transition、transform）均已得到广泛支持，兼容性覆盖99%以上的现代浏览器。

🔹 Tooltip（提示框）：轻量级，仅显示简短文本，悬停触发，纯CSS可实现。适合解释图标、缩写、辅助说明。
🔹 Popover（弹出框）：更丰富，可包含标题、图片、按钮等复杂内容，通常需要JS控制显示/隐藏。适合表单辅助、操作确认等场景。

选择建议：简短提示用Tooltip，复杂交互用Popover。本工具专注于纯CSS Tooltip生成。