Tooltip – Automattic Design System

Import

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

Props

Name	Type	Required	Description
`children`	`React.ReactElement`	Yes	The anchor for the tooltip. Note: Accepts only one child element.
`className`	`string`		Custom class name for the tooltip.
`hideOnClick`	`boolean`		Option to hide the tooltip when the anchor is clicked. @default true
`delay`	`number`		The amount of time in milliseconds to wait before showing the tooltip. @default 700
`placement`	`Placement`		Where the tooltip should be positioned relative to its parent. @default top
`shortcut`	`ShortcutProps[ 'shortcut' ]`		An option for adding accessible keyboard shortcuts. If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of `display` (string) and `ariaLabel` (string).
`text`	`string`		The text shown in the tooltip when anchor element is focused or hovered.

Examples

Default

const Default = ( props ) => (
	<Tooltip { ...props } />
);

Keyboard Shortcut

const KeyboardShortcut = ( props ) => (
	<Tooltip { ...props } />
);

Nested

In case one or more Tooltip components are rendered inside another Tooltip component, only the tooltip associated to the outermost Tooltip component will be rendered in the browser and shown to the user appropriately. The rest of the nested Tooltip components will simply no-op and pass-through their anchor.

const Nested = ( props ) => (
	<Tooltip { ...props } />
);