文字提示 (Tooltip)
常用于展示鼠标 hover 时的提示信息。
基础用法
Example
位置
支持 12 个不同的方向。
Example
高级用法
支持手动控制、自定义延时、富文本内容等。
Manual Control (Click)
No Delay + Icon
Example
主题定制
通过 BrConfigProvider 全局配置或 Tailwind CSS 类名局部配置。
全局定制
在 BrConfigProvider 中配置 popover、radius、shadow 等变量。
Config Provider Theme
Tailwind Override
Example
API
BrTooltip
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| defaultOpen | boolean | false | 默认是否打开。 |
| open | boolean | undefined | 受控的打开状态。 |
| delayDuration | number | 300 | 鼠标移入触发的延迟时间（毫秒）。 |
| disableHoverableContent | boolean | false | 是否禁用鼠标悬停在内容上时保持打开。 |
BrTooltipTrigger
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| asChild | boolean | false | 是否作为子元素渲染。 |
BrTooltipContent
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| side | 'top' | 'right' | 'bottom' | 'left' | 'top' | 弹出位置。 |
| sideOffset | number | 4 | 距离触发元素的偏移量。 |
| align | 'start' | 'center' | 'end' | 'center' | 对齐方式。 |
| avoidCollisions | boolean | true | 是否避免碰撞边界。 |