Tooltip

一个使用其子节点作为锚点的简单文本提示。该组件仅接受文本内容，可能是一个很好的选择 浏览器 title 属性的替代方案，它体积小，出现延迟时间长。

§用法

import {Tooltip} from '@gravity-ui/uikit';

<Tooltip content="Content">
  <div tabIndex={0}>Anchor</div>
</Tooltip>;

§锚

Tooltip 为了工作，你应该通过有效的子女 ReactElement 身份获得接受 ref 财产的证书 HTMLElement 以及其他的属性 HTMLElement。

或者，你可以将函数作为子组件传递，手动为底层组件提供 ref 和 props：

import {Tooltip} from '@gravity-ui/uikit';

<Tooltip content="Content">
  {(props, ref) => <MyCustomButton buttonProps={props} buttonRef={ref} />}
</Tooltip>;

§受控状态

默认情况下，通过将鼠标悬停在锚点上来 Tooltip 打开和隐藏。您可以更改此行为以手动设置打开状态。 将你的状态传递给道 open 具并从 onOpenChange 回调中进行更改。 onOpenChange 回调具有以下签名： （打开：布尔值，事件？:事件，原因：“悬停” | '焦点') => 空白。

§角色

Tooltip 接受更改其行为方式的可访问性条款的 role 财产。 tooltip 当锚有自己的文本和其他 label 角色时，应使用角色（例如在图标按钮中）。

§属性

§CSS API