Explore the system

Get started

Get the tools and building blocks to design and develop consistent and accessible experiences.

Start developing Start designing

Tooltips

Tooltips show informative text when users hover over, focus on, or tap an element.

Guidance

Tooltips can be used to provide users with inline help in certain situations. As a general rule, the information in a tooltip should be helpful, but not essential.

Do

  • Use a tooltip to define a term
  • Show users details about data points on a visualization

Don’t

  • Use tooltips for information that is vital to task completion
  • Include interactive elements inside a tooltip (like links, or buttons)

Tooltip

Measures the price change of the cost of a fixed basketGoods and services of unchanging or equivalent quantity and quality of consumer goods and services purchased by households. It is widely used as an indicator of the rate of inflation.

HTML

<span class="gnb-tooltip" role="tooltip" tabindex="0">visible term<span class="gnb-tooltip-text">Your tooltip text</span></span>