ElyriTooltip
工具提示：悬停或聚焦触发，自动测量定位并在空间不足时翻转，只承载不可交互的短文案。
安装
添加组件
pnpm dlx @elyri/cli@latest add tooltip示例
四个方向
top / bottom / left / right 四种摆放方向。
import { Tooltip } from './components/elyri/Tooltip';
export function Example() {
return (
<div className="demo-ui-row">
<Tooltip placement="top">
<Tooltip.Trigger>top</Tooltip.Trigger>
<Tooltip.Content>Short, non-interactive hint</Tooltip.Content>
</Tooltip>
<Tooltip placement="bottom">
<Tooltip.Trigger>bottom</Tooltip.Trigger>
<Tooltip.Content>Short, non-interactive hint</Tooltip.Content>
</Tooltip>
<Tooltip placement="left">
<Tooltip.Trigger>left</Tooltip.Trigger>
<Tooltip.Content>Short, non-interactive hint</Tooltip.Content>
</Tooltip>
<Tooltip placement="right">
<Tooltip.Trigger>right</Tooltip.Trigger>
<Tooltip.Content>Short, non-interactive hint</Tooltip.Content>
</Tooltip>
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
open | boolean | — | 受控开关 |
defaultOpen | boolean | false | 非受控初始开关 |
onOpenChange | (open: boolean) => void | — | 开关变化回调 |
delay | number | 200 | 悬停多久后显示（毫秒），键盘聚焦立即显示 |
placement | 'top' | 'bottom' | 'left' | 'right' | 'top' | 期望方向：top / bottom / left / right |
align | 'start' | 'center' | 'end' | 'center' | 交叉轴对齐：start / center / end |
offset | number | 8 | 与触发元素的间距 |
Tooltip.Trigger | ButtonHTMLAttributes | — | 触发按钮，负责悬停 / 聚焦逻辑 |
Tooltip.Content | HTMLAttributes | — | 提示内容，role="tooltip"，不可交互 |