Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
Interface elements
Components
Tooltip
Tooltip
The tooltip displays additional information on hover or click. The information included should be explanatory, useful and non-essential.
Uses
How to use
When you want to provide additional information or context about a user interface element without interrupting the user's task.
To provide a brief description or explanation of a user interface element, such as an icon or button, or to display a brief description of a menu option or setting.
How not to use
Avoid using the tooltip component in an excessive or obtrusive way, as this can be frustrating for the user and can interrupt the task at hand.
Behaviour
Type
Description only
Location
Top
Top left
Top right
Bottom
Bottom left
Bottom right
Right
Left
Accessibility
This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.
The container element defaults to role="button" but can be edited by the developer.
the tooltip element has aria-describedby linked via an id to the popover popup element.
Popover popover element has role="tooltip".
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
