用AI生成CSS悬停提示框的提示词示例与可复制代码

这个提示词用于生成一个纯 CSS 实现的悬停提示框效果，无需任何 JavaScript 即可完成交互逻辑。核心思路是借助 HTML 的 data 属性存储提示文字，再通过 CSS 的伪元素和过渡动画让提示框在鼠标悬停时平滑出现与消失。这种方案结构简洁、性能优异，适合用在按钮说明、图标标注、表单字段提示等常见界面场景中。

对于前端开发者或设计师来说，这类提示词在需要快速生成可复用 UI 组件时非常实用。你只需将生成的代码片段粘贴进项目，修改 data 属性的内容即可适配不同文案，无需额外引入第三方库。推荐在 ChatGPT、Claude 或 GitHub Copilot 等代码生成工具中使用此提示词。如果想进一步扩展，可以在提示词中补充方向要求（如从上方或左侧弹出）、颜色主题或响应式适配，以获得更贴合实际项目需求的输出结果。