Tooltip

A tooltip is a small, elevated surface that appears to provide non-essential, contextual information when someone hovers or focuses on an associated UI element.

Tooltips should be used to provide helpful plaintext information. Don’t use them to communicate system feedback. If you need to deliver structured information or interactions, try a popover instead.

Subject:
FY24 Marketing Budget
Text highlight color
Copy me
Tooltip
Hello world! This is a long line of text. Max tooltip width is 240px.
Tooltip
Default
None
Tooltip
Bottom
Tooltip
Top
Tooltip
Left
Tooltip
Right
Tooltip
Popover
Inverted
None
Tooltip
Bottom
Tooltip
Top
Tooltip
Left
Tooltip
Right
Tooltip