Displays a floating panel while the user is hovering their cursor over a target UI element (or while the target is in focus)
Code component(s): Tooltip
Tooltips are generally used to provide additional information about the hover target (usually a concise description or help text). In some cases, tooltips can be used to provide a peek at the detailed information that would be available if the user were to click on the target.
Since hovering is not an interaction that’s available on touch devices, tapping on the target can show the tooltip (because the target would become focused). Even so, this interaction is not optimized for use on touch devices (eg, mobile).
Use Popover instead when you need a floating panel that has interactive elements.
The element that triggers this tooltip (ie, when the user hovers over or focuses on the element). The tail direction will automatically be adjusted to try to keep the tooltip visible regardless of the target’s position in the viewport.
You can provide any content you’d like, but do not include interactive elements
Specify if/how this component resizes horizontally and vertically
While you can provide whatever content you’d like, we recommend using one of the following patterns if possible.
This is the simplest layout available
For when you need a visually prominent headline
Targets should be keyboard-accessible (and should include a focus state)
Since the tooltip is dismissed when the cursor leaves the hover target, the tooltip would disappear before users are able to interact with any elements embedded inside it
Since this component isn’t optimized for touch devices, use it judiciously