Tooltip Edit

Tooltip is a React component to render floating help text relative to a node when it receives focus or it is hovered upon by a mouse. If the tooltip exceeds the bounds of the page in the direction it opens, its position will be flipped automatically.

Render a Tooltip, passing as a child the element to which it should anchor:

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

const MyTooltip = () => (
    <Tooltip text="More information">
        <div>Hover for more information</div>
    </Tooltip>
);

The component accepts the following props:

The element to which the tooltip should anchor.

NOTE: Accepts only one child element.

• Required: Yes

The amount of time in milliseconds to wait before showing the tooltip.

• Required: No
• Default: 700

Option to hide the tooltip when the anchor is clicked.

• Required: No
• Default: true

Used to specify the tooltip’s placement with respect to its anchor.

• Required: No
• Default: 'bottom'

Note: use the placement prop instead when possible.

Legacy way to specify the popover’s position with respect to its anchor. Specify y- and x-axis as a space-separated string. Supports 'top', 'middle', 'bottom' y axis, and 'left', 'center', 'right' x axis.

• Required: No
• Default: 'bottom'

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.

• Required: No

The text shown in the tooltip when anchor element is focused or hovered.

• Required: No