提示信息
提示信息用于显示简短、信息性的消息，当用户与元素交互时出现。
安装
上述命令仅用于单独安装。如果 @heroui/react 已全局安装，则可以跳过此步骤。
导入
对于单独安装，请注意您应该将
./node_modules/@heroui/theme/dist/components/popover.js添加到您的tailwind.config.js文件中，因为提示信息复用了弹出框样式。
用法
带箭头
颜色
位置
偏移量
受控
带延迟
您可以使用 delay 和 closeDelay 属性控制提示信息的打开和关闭延迟。
悬停在第二个按钮上会立即显示提示信息。如果您等待一段时间延迟后再悬停在另一个元素上，则延迟会重新开始。
自定义内容
自定义动画
提示信息组件提供了 motionProps 属性来自定义进入/退出动画。
在这里了解更多关于 Framer motion variants 的信息。这里。
插槽
- base: 主要的提示信息插槽，它包裹提示信息内容。
- arrow: 箭头插槽，它包裹提示信息箭头，箭头的放置位置基于提示信息的位置，例如
data-[placement=top]:...。
自定义样式
您可以通过将自定义 Tailwind CSS 类传递给组件插槽来自定义 Tooltip 组件。
数据属性
Tooltip 组件在 base 元素上具有以下属性
- data-open: 当 tooltip 打开时。基于 tooltip 状态。
- data-placement: tooltip 的位置。基于
placement属性。箭头元素会基于此属性定位。 - data-disabled: 当 tooltip 被禁用时。基于
isDisabled属性。
无障碍性
- 键盘焦点管理和跨浏览器标准化。
- 悬停管理和跨浏览器标准化。
- 屏幕阅读器标签支持 (aria-describedby)。
- 通过 ARIA 作为 tooltip 暴露给辅助技术。
- 匹配原生 tooltip 行为，首次 tooltip 悬停有延迟，后续 tooltip 无延迟。
API
Tooltip Props
| 属性 | 类型 | 默认值 |
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 Events
| 属性 | 类型 | 默认值 |
onOpenChange | | |
shouldCloseOnInteractOutside | | |
onClose | |
