Tooltip

气泡提示家族：TooltipBubble 独立气泡、TooltipAnchor 触发图标、Tooltip 包裹触发元素的复合组件。

TooltipBubble

纯气泡组件，可独立渲染用于静态展示箭头方向与尺寸；实际业务中一般由 Tooltip 内部调用。

Import

import { Tooltip, TooltipBubble, TooltipAnchor } from "@forge-ui/react";

Usage

传入 content 与 position，size 控制单行或多行。

Text Here

Text Here Lorem Ipsum Dolor Sit Amet

1<TooltipBubble content="Text Here" position="top" size="sm" />
2<TooltipBubble content="Text Here Lorem Ipsum" position="top" size="lg" />

Position

4 个方向：top / bottom / left / right。

Text Here

1<TooltipBubble content="Text Here" position="top" />
2<TooltipBubble content="Text Here" position="bottom" />
3<TooltipBubble content="Text Here" position="left" />
4<TooltipBubble content="Text Here" position="right" />

Size

sm 单行、lg w-44 多行自动换行。

Text Here

Text Here Lorem Ipsum Dolor Sit Amet

1<TooltipBubble content="Text Here" size="sm" />
2<TooltipBubble content="Text Here Lorem Ipsum Dolor Sit Amet" size="lg" />

API

Attribute	Type	Default	Description
`content`	`string`	`—`	气泡内显示的文字。
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	气泡方向，决定箭头位置。
`size`	`'sm' \| 'lg'`	`'sm'`	sm 为单行，lg 为 w-44 多行。

TooltipAnchor

14×14 的圆形 icon 触发器，提供 idle / active 两种状态。

Usage

通过 icon 传入 14px 的图标节点，常用 Info / Danger 两类。

1<TooltipAnchor icon={<InfoCircleBoldDuotone size={14} />} state="idle" />
2<TooltipAnchor icon={<InfoCircleBoldDuotone size={14} />} state="active" />

API

Attribute	Type	Default	Description
`icon`	`ReactNode`	`—`	触发 icon，推荐 solar-icon-set 14px。
`state`	`'idle' \| 'active'`	`'idle'`	idle 灰色 / active 紫色。

Tooltip

复合组件：将 TooltipAnchor 包裹在 Tooltip 内即可实现 hover 弹出气泡，也可通过 open 受控。

Usage

下面示例把 open 固定为 true 便于截图；真实用法省略 open 即可走 hover 逻辑。

1<Tooltip content="Text Here" position="top" size="lg" open={true}>
2  <TooltipAnchor icon={<InfoCircleBoldDuotone size={14} />} state="active" />
3</Tooltip>

API

Attribute	Type	Default	Description
`children`	`ReactNode`	`—`	触发元素，一般为 TooltipAnchor。
`content`	`string`	`—`	气泡文案。
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	气泡方向。
`size`	`'sm' \| 'lg'`	`'sm'`	气泡尺寸。
`open`	`boolean`	`undefined`	受控显示；不传则 hover/focus 触发。

看所有变体 →