提示 Tooltip

封装自 @radix-ui/react-tooltip，提供用户悬浮交互时的浮层提示功能，样式优雅、可访问性良好，支持方向控制与动画。

---

📦 引入方式

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@npmqg/react-ui-tooltip';

---

🧩 使用示例

示例

源码

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <button className="btn">悬浮我</button>
    </TooltipTrigger>
    <TooltipContent>提示内容</TooltipContent>
  </Tooltip>
</TooltipProvider>

📚 不同方向的 Tooltip

示例

源码

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <button className="btn">右侧提示</button>
    </TooltipTrigger>
    <TooltipContent side="right" sideOffset={8}>
      右边来的提示！
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

---

🧩 组件结构

组件名	属性	类型	默认值	说明
Tooltip	—	—	—	提示框的根组件，包裹 TooltipTrigger 和 TooltipContent
TooltipTrigger	children	React.ReactNode	—	触发提示框显示的元素（通常是一个按钮或链接）
TooltipContent	side	'top' | 'right' | 'bottom' | 'left'	'top'	提示浮层的显示方向
	sideOffset	number	4	与目标元素之间的偏移
	className	string	—	自定义样式类名
	其余	继承自 @radix-ui/react-tooltip.Content	—	如 align, collisionPadding 等
TooltipProvider	—	—	—	提供 Tooltip 的上下文，通常作为根容器使用

---

🎨 动画与样式说明

📚 内置动画（结合 Radix 的状态和方向类）：

• 渐入/渐出动画：fade-in-0 → fade-out-0
• 缩放效果：zoom-in-95 → zoom-out-95
• 位移滑入：例如 data-[side=top]:slide-in-from-bottom-2

---

⚠️ 注意事项

• 使用 TooltipTrigger 时建议添加 asChild，防止嵌套按钮带来语义错误。
• TooltipProvider 不是必须，但建议在全局使用，避免嵌套 tooltip 导致的交互问题。
• 默认动画基于 Tailwind 与 Radix data- 属性，可结合 motion 更细致定制。