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.

Usage

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>
);

Top ↑

Props

The component accepts the following props:

Top ↑

children: React.ReactElement

The element to which the tooltip should anchor.

NOTE: Accepts only one child element.

  • Required: Yes

Top ↑

delay: number

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

  • Required: No
  • Default: 700

Top ↑

hideOnClick: boolean

Option to hide the tooltip when the anchor is clicked.

  • Required: No
  • Default: true

Top ↑

placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'

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

  • Required: No
  • Default: 'bottom'

Top ↑

position: string

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'

Top ↑

shortcut: string | object

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

Top ↑

text: string

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

  • Required: No