
Icon
Tooltip

Error
Multiple erros
Warning
Multiple warnings

Default
Hover
The tooltip appears on hover (for mouse users).
The tooltip should dismiss when the user moves the pointer away.
1. When to use
Use the Issue Indicator to highlight issues or errors associated with a specific element or context. Avoid using this component for non-critical or purely informational purposes. ¹

2. Content
Provide actionable or informative text in the tooltip to help users understand and resolve the issue. Do not overload the tooltip with excessive text or unrelated details. ¹

3. Overloading
Avoid overloading the interface with too many Issue Indicators. Prioritize and group related issues when possible.

Related Components
Accessibility
Color contrast ratio for our Issue Indicator component meets AA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.
Additional Reading
Tooltip Guidelines https://www.nngroup.com/articles/tooltip-guidelines/