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
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.
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.
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.
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.
- Link capitalization is sentence case (exception when link is a name).
- Use common language to inform users what the link leads to.
- Don’t use phrases such as “click here” without providing any context.