工具提示

Tooltip是一个React组件,用于在节点接收焦点或被鼠标悬停时呈现相对于节点的浮动帮助文本。如果工具提示在打开方向上超出页面边界,则其位置将自动翻转。

用法

渲染工具提示,将其应定位到的元素作为子元素传递:

从“@wordpress/components”导入{Tooltip};const MyTooltip=()=>(<工具提示text=“更多信息”>悬停以获取更多信息</工具提示>);

嵌套的工具提示

如果一个或多个工具提示组件在另一个内部渲染工具提示组件,仅与最外层关联的工具提示工具提示组件将在浏览器中呈现并适当地显示给用户。嵌套的其余部分工具提示组件将简单地no-op并通过其锚。

道具

组件接受以下道具:

儿童:反应。反应元件

工具提示应定位到的元素。

注:只接受一个子元素。

  • 必需:是

延迟:

显示工具提示之前等待的时间(以毫秒为单位)。

  • 必需:否
  • 违约:700

隐藏单击:布尔值

选项可在单击定位时隐藏工具提示。

  • 必需:否
  • 违约:真的

安置:“top”|“top-start”|“op-end”|“right”|“right-start“|”right-end“|”bottom“|”battom-end“|”left“|”left-start‘|”left-end“

用于指定工具提示相对于其定位点的位置。

  • 必需:否
  • 违约:“底部”

位置:一串

注意:使用安置如果可能的话,请使用道具。

指定popover相对于其锚点的位置的传统方法。将y轴和x轴指定为空格分隔的字符串。支持“顶部”,“中间”,“底部”y轴,和“左侧”,“中心”,“正确”X轴。

  • 必需:否
  • 违约:“底部”

快捷方式:一串|对象

用于添加可访问键盘快捷键的选项。

如果快捷方式是字符串,则需要显示文本。如果快捷方式是一个对象,它将接受显示:一串aria标签:一串.

  • 必需:否

文本:一串

当锚点元素处于焦点或悬停状态时,工具提示中显示的文本。

  • 必需:否