工具提示
工具提示在用户与元素交互时显示简短的、信息性的消息。
安装
上述命令仅用于单独安装。 如果您已全局安装 @nextui-org/react 则可以跳过此步骤。
导入
对于单独安装，请注意，您应该将
./node_modules/@nextui-org/theme/dist/components/popover.js添加到您的tailwind.config.js文件中，因为工具提示会重用弹出框样式。
用法
带箭头
颜色
位置
偏移
可控的
带延迟
您可以使用 delay 和 closeDelay 属性来控制工具提示的 open 和 close 延迟。
悬停在第二个按钮上会立即显示工具提示。如果您在悬停另一个元素之前等待延迟，则延迟会重新开始。
自定义内容
自定义动画
Tooltip 提供一个 motionProps 属性来自定义 enter / exit 动画。
在此处了解有关 Framer 动画变体的更多信息：这里。
插槽
- base：主要的工具提示插槽，它包裹着工具提示内容。
- arrow：箭头插槽，它包裹着工具提示箭头，箭头的放置基于工具提示的放置，例如
data-[placement=top]:...。
自定义样式
您可以通过将自定义 Tailwind CSS 类传递给组件插槽来自定义 Tooltip 组件。
数据属性
Tooltip 在 base 元素上具有以下属性
- data-open：当工具提示打开时。基于工具提示状态。
- data-placement：工具提示的放置位置。基于
placement属性。箭头元素根据此属性定位。 - data-disabled：当工具提示被禁用时。基于
isDisabled属性。
辅助功能
- 键盘焦点管理和跨浏览器规范化。
- 悬停管理和跨浏览器规范化。
- 屏幕阅读器标签支持 (aria-describedby)。
- 通过 ARIA 以工具提示的形式向辅助技术公开。
- 匹配原生工具提示行为，第一次悬停工具提示时有延迟，后续工具提示无延迟。
API
Tooltip 属性
| 属性 | 类型 | 默认值 |
children* | | |
content | | |
size | | "md" |
color | | "default" |
radius | | "md" |
shadow | | "sm" |
placement | | "top" |
delay | | "0" |
closeDelay | | "500" |
isOpen | | |
defaultOpen | | |
offset | | "7" |
containerPadding | | "12" |
crossOffset | | "0" |
showArrow | | false |
shouldFlip | | true |
triggerScaleOnOpen | | true |
shouldBlockScroll | | true |
isKeyboardDismissDisabled | | false |
isDismissable | | false |
shouldCloseOnBlur | | true |
motionProps | | |
portalContainer | | "document.body" |
updatePositionDeps | | "[]" |
isDisabled | | false |
disableAnimation | | false |
classNames | |
Tooltip 事件
| 属性 | 类型 | 默认值 |
onOpenChange | | |
shouldCloseOnInteractOutside | | |
onClose | |
