Resources
Intro & Anatomy
Tooltips are small contextual overlays that provide additional, non-crucial information when users hover over or focus on elements. Use tooltips to explain functionality, provide context, or offer supplementary details without cluttering the main interface, e.g. explaining icon meanings, providing definitions, or showing additional context.
Tooltips include optional arrows that can be positioned on any side (top, left, bottom, right) to point toward the triggering element.
Options & Styles
Text & Icon
Tooltips can include optional elements for flexible information display:
Icon & Title are optional
Description is mandatory and contains the main tooltip content
Arrow Position
Arrow/tip is optional and can be positioned at top left/right, left, bottom left/right, or right to point toward the triggering element.
Best Practice & Usage
Tooltips should provide helpful supplementary information without hiding critical content. Use tooltips to enhance user understanding whilst ensuring all essential information remains visible in the main interface.
Use tooltips to display additional and non-crucial information to users, such as explaining an icon.
Always display critical information in the UI itself and don't hide it in tooltips where it might not be seen.
Keep the content in tooltips short and easy to understand.
Don't write long and hard to understand paragraphs in tooltips. If there's a lot of information, opt for other components instead.
Display the tooltip so it doesn't overlap any other elements.
When there's crucial information for a task, don't hide it in a tooltip. Opt to display it as a hint or visible text.
Theming
You can customise colours, shadows, border width and radius, and font styles to match your design requirements.
When not using MDX icons, a slot is available to use your own icon library or SVG icons within tooltip content.