Open in Playroom
  • Dialog For exposing additional content in a modal with richer formatting.
  • Disclosure For revealing content inline with a light visual treatment.
Follows the WAI-ARIA Tooltip Pattern.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.
The trigger element must support ref, tabIndex and aria-describedby props.
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
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