Tooltip

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

Import#

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

Examples#

Basic#

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

Formatted content#

Tooltip accepts any valid React node as content.

Placement#

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

Sizes#

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

Controlled tooltip#

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

Disabled tooltip#

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

Close on click#

Delayed close#


API Reference#

Prop
Type
Default
children*
React.ReactNode
No default value
content
React.ReactNode
No default value
isOpen
boolean
false
placement
enum
"bottom"
size
enum
"medium"
anchorOffset
number
8
closeDelay
number
100
isDisabled
boolean
false
shouldCloseOnClick
boolean
true
onClose
function
No default value
onOpen
function
No default value
addAriaDescription
boolean
true