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.