Tooltip

A simple text tip that uses its child node as an anchor. This component accepts only text content and may be an excellent alternative to the browser's title attribute with its small size and long appearance delay.

§Usage

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

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

§Anchor

In order for Tooltip to work you should pass a valid ReactElement as a children which accepts ref property for HTMLElement and other properties for HTMLElement.

Alternatively, you can pass function as a children to provide ref and props manually to your underlying components:

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

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

§Controlled State

By default Tooltip opens and hides by hovering the anchor. You can change this behaviour to manually set the open state. Pass your state to the open prop and change it from onOpenChange callback. onOpenChange callback has the following signature: (open: boolean, event?: Event, reason: 'hover' | 'focus') => void.

§Role

Tooltip accepts the role property which changes how it should act it terms of accessibility. tooltip role should be used when anchor has its own text and label role otherwise (e.g. in icon button).

§Properties

§CSS API