Tooltip

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

Anatomy


import { Tooltip } from '@nex-ui/react'

Usage

Colors

Placements

Sizes

Offset

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

Flip

使用 flip 属性可以更改 Tooltip 的位置，使其保持在视图中。默认值为 { mainAxis: true, crossAxis: true }。设置 false 可禁用翻转行为。

Shift

使用 shift 属性可以移动 Tooltip 以保持其在视图中。默认为 true。

Interactive

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

Delay

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

Controlled

Open: No

API

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

Prop	Type	Default	Description
content	ReactNode	-	Tooltip 显示的内容。
children	ReactElement	-	Tooltip 的触发元素。
ref	Ref	-	用于转发 Tooltip 根元素的 ref。
className	ClassValue	-	用于根元素的 className。
as	ElementType	'div'	用于 Tooltip 根元素的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。
sx	Interpolation	-	用于根元素的 sx 属性。
classNames	Partial<Record<Slots, ClassValue>>	-	Tooltip Slots 的 className。
slotProps	Partial<Record<Slots, ComponentProps>>	-	Tooltip Slots 的 props。
container	HTMLElement \| null\|() => HTMLElement \| null	document.body	放置 Portal 的容器元素。
open	boolean	-	控制 Tooltip 的打开状态。(受控)
defaultOpen	boolean	-	Tooltip 的默认打开状态。(非受控)
onOpenChange	(open: boolean) => void	-	当 Tooltip 打开/关闭时触发回调函数。
onClose	() => 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'	'md'	Tooltip 的圆角大小。
maxWidth	CSSObject["maxWidth"]	300	Tooltip 的最大宽度。
width	CSSObject["width"]	-	Tooltip 的宽度。
minWidth	CSSObject["minWidth"]	-	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	移动 Tooltip 以使其保持在可见范围内。
interactive	boolean	false	是否在交互式时保持内容可见。
keepMounted	boolean	false	即使 Tooltip 未打开也保持其挂载状态。
closeOnEscape	boolean	true	按下 Escape 键时是否关闭 Tooltip。
closeOnClick	boolean	true	点击触发元素时是否关闭 Tooltip。
closeOnDetached	boolean	true	当触发元素被完全遮挡时是否关闭 Tooltip。
openDelay	number	100	显示 Tooltip 前的延迟时间（毫秒）。
closeDelay	number	100	隐藏 Tooltip 前的延迟时间（毫秒）。
disableAnimation	boolean	false	是否禁用 Tooltip 的动画效果。

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