Tooltip
A short, non-interactive description for a control.
A short, non-interactive description for a control.
Import
import { Tooltip } from 'bmates-ui';Basic usage
The example below mirrors the primary Storybook composition and can be used as a starting point.
<Tooltip content="Save the current changes">
<Button aria-label="Save">Save</Button>
</Tooltip>Preview
<Tooltip content="Save the current changes">
<Button aria-label="Save">Save</Button>
</Tooltip>Prop previews
The examples below isolate the props that change visual output or interaction.
Directions
<Tooltip direction="right" message="More information">...</Tooltip>Component API
message
Required tooltip text.
direction
Side on which the tooltip is displayed.
children
Tooltip target element.
Usage notes
- Every component in the table is exported from
bmates-ui. - Unless noted otherwise, a component also accepts the standard props of its underlying HTML element.
- For application-owned state, use a controlled value and its change handler instead of only a
default*prop.
