文字提示

鼠标悬停时显示的简短说明。移动端没有悬停，改为点击触发器打开、点击外部关闭。

交互预览

把鼠标移到按钮上查看效果；打开 open 可固定显示，便于调整位置参数。

参数

content: 提示内容；传 null 时不渲染提示，直接返回子元素; ReactNode
side: 相对触发器的方向，空间不足时自动翻转; 'top' | 'right' | 'bottom' | 'left'
align: 在该方向上的对齐方式; 'center' | 'start' | 'end'
sideOffset: 与触发器的距离，单位 px，默认 4; number
delayDuration: 悬停多久后显示，单位 ms，默认 100; number
open: 受控显示状态；不传时由悬停控制; boolean
onOpenChange: —; 显示状态变化时触发；移动端由点击触发器和点击外部驱动; (open: boolean) => void
triggerAsChild: —; 默认 true，直接把触发行为挂到子元素上，不额外包一层 button; boolean
contentClassName: —; 提示框的类名; string
arrowClassName: —; 箭头的类名，改颜色时需同时改 fill; string
container: —; 提示框挂载的容器，默认 body; HTMLElement

方向

纯图标按钮

纯图标按钮没有文字，用 Tooltip 补充说明；同时保留 aria-label 供读屏使用。

使用说明

基础用法

children 即触发元素，悬停时显示 content。

Demo.tsx

import { Button, Tooltip } from '@apeiron/ui';

export function Demo() {
  return (
    <Tooltip content="保存后立即生效">
      <Button variant="outline">保存</Button>
    </Tooltip>
  );
}

方向

Demo.tsx

<Tooltip side="right" content="显示在右侧">
  <Button>右侧</Button>
</Tooltip>

纯图标按钮

Demo.tsx

import { Copy } from 'lucide-react';

<Tooltip content="复制">
  <Button variant="ghost" icon={<Copy />} aria-label="复制" />
</Tooltip>

按条件关闭

content 为 null 时不渲染提示，只渲染触发元素。

Demo.tsx

<Tooltip content={isDisabled ? '暂无权限' : null}>
  <Button disabled={isDisabled}>编辑</Button>
</Tooltip>

表单项

图标