Info links are linked words or terms that deliver quick clarification via a standard tooltip. Content should be brief and useful. Read more about tooltips.

 

Resources

When to use info links

Use info links when minimal clarification is needed. They are ideal for clarifying an action, quickly defining a term, or giving a little bit of context.

Use info links only when extra explanation is critical. These links replace the old question mark icon. They provide more context with less clutter.

You can apply info links to text in a sentence, a field label, or plain text on the page.

Appearance and behavior

Info links can be applied to text in a sentence, a field label, or plain text on the page. These are based on the standard link pattern, with a slight variation to indicate different behavior. A dotted underline appears by default.

 

Note: the focused state shown in screenshot example here is not correct. Focus state should have the blue focus border indicator around it. Spec will be updated.

Responsive behavior

Desktop
These are based on the standard link pattern, with slight variation to indicate different behavior. A dotted underline appears by default. On hover, the link turns blue, and a standard dismissible tooltip displays on click as the link turns darker blue.

 

Mobile
On mobile, when the info link triggers a standard tooltip, the container behaves just like in the desktop.

Content guidelines for info links

Link capitalization is sentence case (except when the link is a proper name).

Do
  • Use info links on 14px and 16px text
  • Use info links on labels (radio buttons, check boxes, switches, fields, etc), body copy, descriptive text, or table elements.
Don’t
  • Don’t use an info link on a nav item, headline, or global header
  • Don’t use info links at sizes smaller than 14px or larger than 16px
  • Don’t use info links on buttons or any other graphical element
  • Was this Helpful?
  •