Tooltip

Tooltip 在用户与元素交互时显示一条简短的信息。

Storybook WAI-ARIA Source Recipe Source

Usage

Colors

Placements

Sizes

Offset

使用 offset 属性可以设置 Tooltip 的偏移量，包括主轴和交叉轴的偏移。设置 false 可禁用偏移。

Interactive

使用 interactive 属性可以使内容在交互式时保持可见。默认为 true。

Delay

使用 openDelay 和 closeDelay 属性可以设置显示和隐藏 Tooltip 的延迟时间（以毫秒为单位）。

Controlled

Open: No

Custom Motion

使用 motionProps 属性自定义 visible / hidden 的动画效果。

API

Tooltip 继承 as (默认为 m.div) 的 Props。

Prop	Type	Default	Description
content	ReactNode	-	Tooltip 显示的内容。
children	ReactNode	-	Tooltip 的触发元素。
container	HTMLElement \| null\|() => HTMLElement \| null	document.body	放置 Portal 的容器元素。
open	boolean	-	控制 Tooltip 的打开状态。(受控)
defaultOpen	boolean	-	Tooltip 的默认打开状态。(非受控)
onOpenChange	(open: boolean) => void	-	当 Tooltip 打开/关闭时触发回调函数。
placement	'top'\|'top-start'\|'top-end'\|'bottom'\|'bottom-start'\|'bottom-end'\|'left'\|'left-start'\|'left-end'\|'right'\|'right-start'\|'right-end'	'top'	Tooltip 出现的位置。
size	'sm' \| 'md' \| 'lg'	'md'	Tooltip 的大小。
color	'default'\|'blue'\|'orange'\|'yellow'\|'cyan'\|'red'\|'green'\|'pink'\|'purple'\|'gray'	'default'	Tooltip 的颜色主题。
radius	'none'\|'sm'\|'md'\|'lg'\|'full'	'md'	Tooltip 的圆角大小。
motionProps	HTMLMotionProps	-	自定义 Tooltip 动画的属性。
offset	false\|number\|{ mainAxis?: number; crossAxis?: number }	5	设置 Tooltip 的偏移量，或禁用偏移。
flip	false\|{ mainAxis?: boolean; crossAxis?: boolean }	{ mainAxis: true, crossAxis: true }	更改 Tooltip 的位置，使其保持在视图中。
shift	boolean	true	移动popper元素以使其保持在可见范围内。
interactive	boolean	true	是否在交互式时保持内容可见。
keepMounted	boolean	false	即使 Tooltip 未打开也保持其挂载状态。
closeOnEscape	boolean	true	按下 Escape 键时是否关闭 Tooltip。
closeOnClick	boolean	true	点击触发元素时是否关闭 Tooltip。
openDelay	number	100	显示 Tooltip 前的延迟时间（毫秒）。
closeDelay	number	100	隐藏 Tooltip 前的延迟时间（毫秒）。
ref	Ref	-	用于转发 Tooltip 根元素的 ref。
className	ClassValue	-	用于根元素的 className。
as	ElementType	m.div	用于 Tooltip 根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
classNames	Partial<Record<Slots, ClassValue>>	-	Tooltip Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	Tooltip Slots 的 props。

Slot Name	Class Name	Default Component	Description
content	.nui-tooltip-content	'div'	Tooltip 的内容容器。