提示

提示显示简短、信息丰富的消息，当用户与元素交互时会出现。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

对于单独安装，请注意您应该将 ./node_modules/@heroui/theme/dist/components/popover.js 添加到您的 tailwind.config.js 文件中，因为 tooltip 重复使用 popover 样式。

用法

带箭头

颜色

位置

偏移

受控

带延迟

您可以使用 delay 和 closeDelay 属性来控制 tooltip 的 open 和 close 延迟。

将鼠标悬停在第二个按钮上会立即显示 tooltip。如果您在悬停另一个元素之前等待一个延迟，延迟将重新开始。

自定义内容

自定义运动

Tooltip 提供了 motionProps 属性，以自定义 enter / exit 动画。

了解更多关于 Framer motion 变体的内容请在此处。

插槽

• base: 主提示插槽，包裹提示内容。
• arrow: 箭头插槽，包裹提示箭头，箭头的位置基于提示位置，例如 data-[placement=top]:...。

自定义样式

您可以通过向组件插槽传递自定义 Tailwind CSS 类来定制 Tooltip 组件。

数据属性

Tooltip 在 base 元素上具有以下属性：

• data-open: 提示处于打开状态时。基于提示状态。
• data-placement: 提示的位置。基于 placement 属性。箭头元素的位置基于此属性。
• data-disabled: 提示被禁用时。基于 isDisabled 属性。

可访问性

• 键盘焦点管理和跨浏览器规范化。
• 悬停管理和跨浏览器规范化。
• 为屏幕阅读器提供标签支持（aria-describedby）。
• 通过 ARIA 将其公开为提示，供辅助技术使用。
• 与原生提示行为匹配，在第一次悬停时有延迟，随后悬停则无延迟。

API

Tooltip 属性

Tooltip 事件

Tooltip 类型

Tooltip 定位

Motion 属性