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 either top or bottom.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.