Tooltip

Tooltip is used to describe or add additional information to the user.

Import#

import { Tooltip } from '@volue/wave-react';

If the Tooltip is wrapping a functional component, ensure that the functional component accepts a ref using forwardRef.

Tooltip accepts any valid React node as content.

Tooltip component comes in two sizes: medium and small. By default, it uses medium size.

Tooltip uses Positioner under the hood, so you can control its placement:

Use the maxWidth prop to control how long content wraps within the tooltip.

You can make the dialog controlled, by passing your own state to isOpen prop.

You can disable showing the tooltip with isDisabled prop. Also, if there is no content provided, tooltip will skip rendering.

The delay prop controls how long to wait before showing a tooltip on hover.

Choose the appropriate delay based on how critical the information is and how frequently users need it:

600ms (default) - For most tooltips on standard interactive elements; reduces accidental tooltips when moving the cursor (no need to specify the delay prop)
300ms (fast) - For interactive elements where quick context is helpful (toolbar actions, status indicators, abbreviated labels)
0ms (instant) - For elements whose primary purpose is to provide information that users need immediately (info icons, help buttons)