Tooltip
Last updated
What is Tooltip?
Tooltips are desktop-only components that display additional information when hovering over or focusing on an element.
- Keyboard Hover Support: Tooltips should be accessible when an element is focused using the keyboard.
- Dynamic Positioning: Tooltip content should be displayed based on the current position of the trigger element on the screen and always visible to the user.
- Hover Timeout: Having a small timeout before triggering a tooltip will help to prevent occasionally showing tooltips while users move their mouse cursor.
- Light Variant: The tooltip should respect its parent element background and provide a variant to be used on darker background colours.
- Instant Transition for Element Groups: If there’s a group of elements using tooltips, hovering over another element while a tooltip’s already active shouldn’t trigger the animation.
More in stage 9: Project Management
- Project Management
- Avatar
- Input Text
- Banner
- Input Checkbox
- Badge
- Input Radio
- Button
- Input Switch
- Card
- List
- Carousel
- Loading Indicator
- Dropdown
- Modal
- Icon
- Tabs
- Select
- Toast
- Textarea
- Component Catalog
- Documentation
- Code Style
- Unit Testing
- Accessibility Testing
- Semantic Versioning
- Release Strategy
- Commit Guidelines
- PR Templates
- Contribution Guidelines
- Roadmap
- Milestones
- Ticketing
- Component Analytics
- Logging
- Tooling Analytics
- Service and Health Metrics
- Community Meetings
- Communication Channel
- Open Hours
- FAQs
Tooltip: common questions
Can I learn Tooltip in Hindi?
This lesson is written in English. Once you sign in, open it in the interactive course and ask the AI tutor to explain Tooltip in Hindi or Hinglish. The tutor answers from this lesson’s own text, so it stays on the syllabus, and it runs on your own Google, OpenAI or Anthropic key.
Is this Tooltip tutorial for beginners?
It is lesson 103 of 124 in the free Design System roadmap, in stage 9, Project Management. If you are new to Design System, start from stage 1 and come back here in order; if you already know the earlier stages, this lesson stands on its own.