Overview

Inline definitions are used to provide supplemental information in the form of a tooltip on text labels.

Anatomy

Basic Usage

How to use this component

Surfacing Links & Buttons

Tooltips should only contain brief, plain-text explanations. Avoid surfacing Links or Buttons in Tooltips, as this is not recommended for accessibility. If hyperlinks or any other actionable elements must be surfaced, you may need to rethink how the information is laid out on the screen, and choose a more appropriate component.

Pairing with Typography

Inline definitions should not be paired with H1 or H2 headers. Instead, use them to provide brief definitions of terms or concepts in the body of your content. If you need to provide a more detailed definition, add a secondary text paired with an inline definition as description text under these headers.