ActionTooltip

Tooltip for labeling action buttons without descriptive text (e.g. icon buttons).

§Usage

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

<ActionTooltip title="Action">
  <div tabIndex={0}>Anchor</div>
</ActionTooltip>;

§Anchor

In order for ActionTooltip 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 {ActionTooltip} from '@gravity-ui/uikit';

<ActionTooltip title="Action">
  {(props, ref) => <MyCustomButton buttonProps={props} buttonRef={ref} />}
</ActionTooltip>;

§Controlled State

By default ActionTooltip 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.

§Properties