TooltipRenderer

Alternatives

Dialog — For exposing additional content in a modal with richer formatting.
Disclosure — For revealing content inline with a light visual treatment.

Accessibility

Tooltips appear on mouse hover, tap and keyboard focus, and are hidden when scrolling and clicking/tapping/focusing on other elements.

Tooltips cannot contain interactive elements like links, buttons or form elements.

Development considerations

The trigger element must support ref, tabIndex and aria-describedby props.

Placement

Tooltips are positioned above the trigger element by default, but you can configure this via the placement prop which accepts either top or bottom.

Whichever direction you choose, the tooltip will be centred against the trigger element.

Open in Playroom

Formatting

To ensure readability, tooltips have a maximum width of 260px, which means that text will wrap onto multiple lines if you provide enough content.

You can also use multiple text elements and layout components to create more custom layouts.

Open in Playroom

Braid Logo