React 组件

UGTooltip 提示

UGTooltip 适合补充简短上下文说明；提示会避开视口边缘，并使用统一的进入与离场动效。

导入方式

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

tsx

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

变体预览

side 表示首选方向，实际方向会根据可用空间自动调整。

长文案与窄屏边界

UGTooltip 默认在 hover 200ms 后展示，也可通过 delayDuration 调整；较长说明会在视口安全区内换行。

使用边界

提示只承载简短说明；需要表单、按钮或可滚动详情时改用 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>
  )
}

属性

属性	类型	默认值	说明
delayDuration	number	200	设置鼠标悬停后的显示延迟（毫秒）；传 0 可立即显示，键盘聚焦始终立即显示。
side	'top' \| 'bottom' \| 'left' \| 'right'	'top'	设置提示框的首选方向；空间不足时自动翻转并限制在视口内。
children	ReactNode	—	通过 Trigger 与 Content 组合构建提示。