Tooltip 是一个 React 组件，用于在元素获得焦点或被鼠标悬停时渲染相对于该节点的浮动帮助文本。如果 Tooltip 在其打开方向上超出页面边界，其位置将自动翻转。

用法

渲染一个 Tooltip，并将应作为锚点的元素作为子元素传递：

import { Tooltip } from '@wordpress/components';

const MyTooltip = () => (
    <Tooltip text="More information">
        <div>Hover for more information</div>
    </Tooltip>
);

嵌套的 Tooltip

如果一个或多个 Tooltip 组件渲染在另一个 Tooltip 组件内部，则只有与最外层 Tooltip 组件关联的 Tooltip 会在浏览器中渲染并适当显示给用户。其余嵌套的 Tooltip 组件将简单地执行空操作（no-op）并透传其锚点。

属性

该组件接受以下属性：

children: React.ReactElement

Tooltip 应锚定的元素。

注意：仅接受一个子元素。

  • 必填：是

delay: number

在显示 Tooltip 之前等待的时间（以毫秒为单位）。

  • 必填：否
  • 默认值：700

hideOnClick: boolean

当锚点被点击时隐藏 Tooltip 的选项。

  • 必填：否
  • 默认值：true

placement: ‘top’ | ‘top-start’ | ‘top-end’ | ‘right’ | ‘right-start’ | ‘right-end’ | ‘bottom’ | ‘bottom-start’ | ‘bottom-end’ | ‘left’ | ‘left-start’ | ‘left-end’

用于指定 Tooltip 相对于其锚点的位置。

  • 必填：否
  • 默认值：'top'

position: string

注意：如可能，请使用 placement 属性代替。

指定弹出层相对于其锚点位置的旧式方法。指定 y 轴和 x 轴，以空格分隔的字符串形式表示。支持 'top'、'middle'、'bottom' y 轴，以及 'left'、'center'、'right' x 轴。

  • 必填：否
  • 默认值：'top'

shortcut: string | object

添加无障碍键盘快捷方式的选项。

如果 shortcut 是字符串，则期望其为显示文本。如果 shortcut 是对象，则将接受 display: string 和 ariaLabel: string 属性。

  • 必填：否

text: string

当锚点元素获得焦点或悬停时显示的 Tooltip 文本。

  • 必填：否