Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback



Shows additional context on tap or hover.



A Tooltip is a feedback component that displays a short, informational message when a user hovers over or focuses on a UI element.

tooltip anatomy banner
  1. Panel : Contains the Panel Content
  2. Content : An area to display any text content


A tooltip can be added to any element if adding the tooltip increases the user’s comprehension. It is common to see tooltips added to icons, fields, and links. However it is important to use reason when adding tooltips to elements. Avoid adding tooltips to elements that don’t need description or elements that are so large it would be difficult to understand what the tooltip is describing.

Common places buttons appear: Icons , Fields, links etc.

When to use

  • To keep extra information off the screen but accessible.
  • To add context to a given screen.
  • To add explanations to visuals such as icons.

When not to use

  • For small bits of information connected to a single action
  • For large and/or structured content
  • For small interactions or choices
  • To add hidden information to the screen itself


Tooltips are great for keeping information initially hidden. In order for users to access it, they need to know it’s there. Showing the tooltip on hover or on keyboard focus of a focusable element ensures that all users can access it, even if they aren’t using a mouse.

Alt text


You can use show direct information with label instead

Alt text


use tooltips to communicate crucial information


When creating tooltip :

  • Keep your tooltips clear and concise. Use the fewest number of words without sacrificing meaning.
  • Tooltips should provide new and valuable information. Never use a tooltip to repeat information already available in the UI
  • If the tooltip is a full sentence, include a period at the end. If the tooltip is a fragment, do not include a period at the end.
  • Don’t use tooltips to communicate crucial information
  • You can use tooltips to describe icons
Alt text


use concise descriptions within tooltips

Alt text


wordy or lengthy descriptions within tooltips.