Floating labels providing context.
Tooltips are an informational UI tool that briefly explain the function of a user interface element. They can be triggered when users hover, focus, tap, or click.
The default tooltip has a black container and contains basic information explaining a feature or part of the UI.
A tooltip is composed of these basic elements:
A tooltip is summoned or dismissed by:
The animation duration is
150ms easing on entrance and exit.
Tooltips can be positioned on the top or the bottom of a trigger, and with a slight animation originating from the trigger.
In the event that a tooltip doesn’t have enough space to be centered, it will be automatically positioned using the “best-placement” attribute. It will default on top or bottom and move left/right/down/up depending on the available space.
In addition to their positioning, tooltips come in a light and dark theme.
Note: The tooltip theme should be opposite whatever background it is on for maximum readability.