This is a work in progress!

This is a draft update. Have feedback? Use the feedback widget on the right. Read current info link guidelines

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

Usage

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. Note: Use this only when extra explanation is critical. These links replace the old question mark icon. They provide more context with less clutter.

Info Links can be applied to text in a sentence, a field label, or plain text on the page.

Text guidelines

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

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.

Responsive behavior

Desktop

If the supplemental information to be displayed is minimal and doesn’t require interaction, the info link is a neutral color and triggers a standard tooltip. If it is clarifying an action or providing help via a hyperlink, the link turns blue on hover/click/tap, and a guidance tooltip is triggered.

Mobile

On mobile, when the info link triggers a standard tooltip, the container behaves just like in the desktop. When it triggers a guidance tooltip, the container appears below the header, takes over the full width of the screen and it is dismissable.

Info link mobile example

Do

  • Link capitalization is sentence case (exception when link is a name).
  • Use common language to inform users what the link leads to.

Don't

  • Don’t use phrases such as “click here” without providing any context.
  • Was this Helpful?
  •