Tooltip

Tooltips contain short, informative message that appears only when a user interact with an element in a graphic user interface (GUI), such as hovering or clicking the tooltip button. They help users to understand a feature by providing supplementary information immediately next to that element. It is a non-essential component that should be used only when the information is helpful but not necessary for a user to complete the main task flow.

Tooltips are mainly limited to desktop computers and laptops and popup tips are their counterparts on mobile screen.

Tooltips are highly contextual and specific and are not adept at explaining the "bigger picture" or an entire task flow. They disappear from users' view therefore, instructions or other directly actionable information cannot be placed inside a tooltip.

For that reason, tooltips cannot be used for information that is vital to task completion, for example, password requirements are essential for users to successfully complete a "create an account" task. In this particular example, the password requirement should always be visable on a page.

A tooltip must:

• be paired nearby to any active element with which they are associated, i.e. icon, text link, button, etc.
• include only short, descriptive and informative text
• positioned in a way that doesn't compete with pertinent information that assists users with completing their goals
  

Consider using a tooltip when:

• additional explanation is needed for a form field unfamiliar to some users
• reasoning is needed for what may seem like an unusual request

HTML / CSS markup considerations:

• apply a tooltip to a <button> element using the classes [cui btn-tooltip] along with one of the four button sizing classes available btn-sm, btn-md, btn-lg, or btn-xl - recommended button size is btn-md
• use the tooltip icon () as defined by the CSS class [cicon-info-circle] - it is important that this functionality is consistently represented across all platforms