React 组件

UGTooltip 提示

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

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGTooltip, UGTooltipTrigger, UGTooltipContent } from '@ug666/ui-react'

变体预览

不同方向的提示框。

状态展示

UGTooltip 默认在 hover 200ms 后展示。

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

尺寸展示

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

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

代码示例

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

tsx

import { UGButton, UGTooltip, UGTooltipContent, UGTooltipTrigger } from '@ug666/ui-react'

export function TooltipButton() {
  return (
    <UGTooltip>
      <UGTooltipTrigger>
        <UGButton variant="outline">悬停查看提示</UGButton>
      </UGTooltipTrigger>
      <UGTooltipContent side="top">这是顶部提示内容</UGTooltipContent>
    </UGTooltip>
  )
}

Props

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