@ug666/react 文档演示

Tooltip 提示

Tooltip 适合补充简短上下文说明，避免页面出现过多永久性文案。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Tooltip, TooltipTrigger, TooltipContent } from '@ug666/react'

变体预览

不同方向的提示框。

状态展示

Tooltip 默认在 hover 200ms 后展示。

适合简短说明，不建议承载复杂交互。

尺寸展示

提示框尺寸由内容长度决定，可通过 className 做微调。

短提示适合按钮说明，长提示建议改用 Popover / Modal。

代码示例

使用 Trigger + Content 的组合方式更易扩展。

import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@ug666/react'

export function TooltipButton() {
  return (
    <Tooltip>
      <TooltipTrigger>
        <Button variant="outline">悬停查看提示</Button>
      </TooltipTrigger>
      <TooltipContent side="top">这是顶部提示内容</TooltipContent>
    </Tooltip>
  )
}

Props 说明

属性	类型	默认值	说明
side	'top' \| 'bottom' \| 'left' \| 'right'	'top'	设置提示框相对触发器的方向。
children	ReactNode	—	通过 Trigger 与 Content 组合构建提示。