
Tooltips
Subtle in-patterns that pack a punch and help your users learn the ropes, triggered by hover or click

What are tooltips?
Tooltips are small, informative text boxes that appear when a user hovers over, focuses on, or clicks an element within a user interface (UI). They provide contextual information, additional details, or usage tips—without cluttering the UI.
Often, tooltips contain a “pointer” to reference a specific element on the page and may be opened via an icon (e.g., a question mark or “new” sign) or over text (e.g., a broken underline). Â
Common use cases for tooltips
More info: Explaining the function of a button or icon that might not be obvious
Definitions: Providing additional details about text or images that can enhance user understanding
Form fields: Displaying quick tips or guidance for form fields, helping users understand what input is expected
Best practices for tooltips
- 1 Your tooltip’s content should provide immediate value to users. Remember that each tooltip is a friction point that takes users time to read and process.
- 2 Don’t point out the obvious. To avoid being redundant, only explain what your user can’t tell from your UI.
- 3 Don’t cram information; instead, link it out. Use tooltips as a gateway to further information; offer a call-to-action (CTA) to learn more from a doc or video if the user wants to dive deeper.
- 4 Be consistent. Use the same pattern or design for where and when a tooltip is available in your app, so your users know what to expect.
- 5 Take the time to make your tooltips look good. Tooltips that are visually appealing and complement your app’s background color are more likely to get engagement than a white background tooltip on a white app UI.
Examples of great tooltips


HubSpot User Onboarding Tooltip

Canva Onboarding Tooltip
Recommended reading 🤓

SaaS Tooltip Design: Mistakes to Avoid and How to Make Tooltips Truly Helpful

10 Best JavaScript Tooltip Libraries [Updated for 2025]

16 Top Tooltip Plugins for UI Design: Enhance Your Tooltip Content Easily
