A concise, floating message that gives users non-critical, extra context on mouse hover or keyboard focus.
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. Tooltips can be triggered on any element of your choice. They are positioned above the trigger element by default, but you can configure this via the placement prop which accepts top, bottom, left, or right.Whichever direction you choose, the tooltip will be centred against the trigger element. 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 like Stack to create more tailored layouts.Keep in mind that Tooltip content should be brief. Ideally less than 100 characters / 20 words, and a maximum of 250 characters / 50 words.Large textThe quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
The trigger element must support ref, tabIndex and aria-describedby props. Dialog — For exposing additional content in a modal with rich formatting. Disclosure — For revealing optional content inline with a light visual treatment.