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.


Component data

Component resources:
SCSS files

Functional grouping: Containers

Demo

Configure: select the dropdowns below to display the variety of options that a tooltip supports.


Code


				
			

Responsive preview

Usage best practices

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

Tooltip variations and features
Tooltips Popup tips
Type of site Desktop Any
Initiated by Hover (mouse or keyboard) Touch/click
Terminated when User leaves predefined interaction area User taps to close or clicks another area of the screen
Paired element Icon, text link, button, image “?” or “i” icon
Content type Microcontent Microcontent

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

Do

Provide brief, non-essential but helpful information in tooltips.

Use short descriptive text for the tooltip content. The recommended character limit is 145.

Use plain and static text for the tooltip content.

Ensure tooltip accessiblity by supporting both mouse and keyboard functionality.

Ensure that the tooltips contrast against the background.

Use tooltips consistently throughout the site.

Don't

Do not hide information that is essential to fulfill the primary task of the page.

Do not provide obvious or redundant information.

Do not use interactive or rich text for the tooltip content Use plain text only.

Do not apply the tooltip to a non-button element.

Do not use different icons other than the icon defined in the CSS.