工具提示
工具提示显示简短的提示信息，当用户与元素交互时出现。
安装
npx nextui-cli@latest add tooltip
以上命令仅用于单个安装。如果 @nextui-org/react 已经全局安装，您可以跳过此步骤。
导入
对于单个安装，请注意您应该将
./node_modules/@nextui-org/theme/dist/components/popover.js添加到您的tailwind.config.js文件中，因为工具提示会重用弹出窗口样式。
用法
带箭头
颜色
位置
偏移
受控
带延迟
您可以使用 open 和 close 属性来控制工具提示的 delay 和 closeDelay。
将鼠标悬停在第二个按钮上会立即显示工具提示。如果您等待一段时间后再将鼠标悬停在另一个元素上，延迟将重新开始。
自定义内容
自定义动画
Tooltip 提供了一个 motionProps 属性来定制 enter / exit 动画。
了解更多关于 Framer Motion 变体的信息 这里.
插槽
- base: 主要 tooltip 插槽，它包裹 tooltip 内容。
- arrow: 箭头插槽，它包裹 tooltip 箭头，箭头的放置位置取决于 tooltip 的放置位置，例如
data-[placement=top]:...。
自定义样式
您可以通过将自定义 Tailwind CSS 类传递给组件插槽来定制 Tooltip 组件。
数据属性
Tooltip 在 base 元素上具有以下属性
- data-open: 当工具提示打开时。基于工具提示状态。
- data-placement: 工具提示的位置。基于
placement属性。箭头元素的位置基于此属性。 - data-disabled: 当工具提示被禁用时。基于
isDisabled属性。
无障碍性
- 键盘焦点管理和跨浏览器规范化。
- 悬停管理和跨浏览器规范化。
- 为屏幕阅读器提供标签支持 (aria-describedby)。
- 通过 ARIA 作为工具提示暴露给辅助技术。
- 与原生工具提示行为匹配，第一个工具提示悬停时延迟，后续工具提示无延迟。
API
工具提示 Props
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| children* | ReactNode[] | 要渲染的子元素。通常是一个触发元素。 | - |
| content | ReactNode | 要在工具提示内渲染的内容。 | - |
| size | sm | md | lg | 工具提示大小。这会改变 content 的字体大小。 | md |
| color | default | primary | secondary | success | warning | danger | 工具提示颜色主题。 | 默认 |
| 圆角 | none | sm | md | lg | full | 工具提示的圆角。 | md |
| 阴影 | none | sm | md | lg | 工具提示的阴影。 | sm |
| 位置 | TooltipPlacement | 工具提示相对于其触发器参考的位置。 | 顶部 |
| 延迟 | 数字 | 工具提示打开之前的延迟时间（毫秒）。 | 0 |
| 关闭延迟 | 数字 | 工具提示关闭之前的延迟时间（毫秒）。 | 500 |
| 是否打开 | 布尔值 | 工具提示是否默认打开（受控）。 | - |
| 默认打开 | 布尔值 | 工具提示是否默认打开（不受控）。 | - |
| 偏移量（px） | 数字 | 参考和弹出框之间的距离或边距。它用于在内部创建偏移修饰符。 | 7 |
| 容器填充（px） | 数字 | 应用于元素与其周围容器之间的放置填充。 | 12 |
| 交叉偏移量（px） | 数字 | 沿元素与其锚元素之间的交叉轴应用的额外偏移量。 | 0 |
| 显示箭头 | 布尔值 | 工具提示是否应该有箭头。 | false |
| shouldFlip | 布尔值 | 当工具提示即将溢出其边界区域时，是否应更改其位置并翻转。 | true |
| triggerScaleOnOpen | 布尔值 | 工具提示打开时，触发器是否应该缩小。 | true |
| shouldBlockScroll | 布尔值 | 是否阻止工具提示外部滚动。 | true |
| isKeyboardDismissDisabled | 布尔值 | 是否禁用按 Esc 键关闭工具提示。 | false |
| isDismissable | 布尔值 | 用户在覆盖层外部交互时是否应关闭覆盖层。 | false |
| shouldCloseOnBlur | 布尔值 | 当焦点丢失或移出工具提示时，工具提示是否应关闭。 | true |
| motionProps | MotionProps | 修改 framer motion 动画的道具。使用 variants API 创建您自己的动画。 | - |
| portalContainer | HTMLElement | 将放置覆盖层门户的容器元素。 | document.body |
| updatePositionDeps | any[] | 强制工具提示位置更新的依赖项。 | [] |
| isDisabled | 布尔值 | 工具提示是否被禁用。 | false |
| disableAnimation | 布尔值 | 工具提示是否动画。 | false |
| classNames | Record<"base"｜"content", string> | 允许为工具提示插槽设置自定义类名。 | - |
工具提示事件
| 属性 | 类型 | 描述 |
|---|---|---|
| onOpenChange | (isOpen: boolean) => void | 工具提示的打开状态发生变化时调用的处理程序。 |
| shouldCloseOnInteractOutside | (e: HTMLElement) => void | 当用户在工具提示 ref 外部与参数元素交互时，如果应调用 onClose，则返回 true。这使您有机会过滤掉不应关闭工具提示的元素的交互。默认情况下，onClose 将始终在覆盖层 ref 外部交互时被调用。 |
| onClose | () => void | 工具提示应关闭时调用的处理程序。 |
工具提示类型
工具提示位置
type TooltipPlacement =| "top"| "bottom"| "right"| "left"| "top-start"| "top-end"| "bottom-start"| "bottom-end"| "left-start"| "left-end"| "right-start"| "right-end";
运动属性
export type MotionProps = HTMLMotionProps<"div">; // @see https://www.framer.com/motion/
