Users need additional, potentially optional information on demand.
Tooltips provide information when an element is hovered over.
Tooltips are attached to an element and appear when the element is hovered over
The show and hide delays of a tooltip may vary depending on the need, but the default is 200ms to show and 0ms to hide
Tooltips cannot be interacted with
Use tooltips for:
Icon and button descriptions
Expanding shortened date/time stamps
I'm a tooltip!
Light tooltip (for dark interfaces):
I'm a light tooltip!
Tooltips can be positioned either above, below, to the left, or to the right of target element. In many situations, tooltips should be positioned dynamically based on the available space around the target element.
The content of a tooltip can vary. It’s best to keep it to a few words.