Tooltips
A Tooltip is a tip that provides a bit of extra context about content or a tool and is considered supplemental micro content. Don’t overuse tooltips, focus on providing clear and informative content on the page with a few tooltips, if needed.
When to use
- To provide brief and helpful content to aid in health literacy and provide educational content
- Use for content in headings, paragraphs, form fields and footnotes
When not to use
- Repeating or unnecessary content
- Don’t use footnotes with tooltips on other interactive elements such as inside accordion headers, buttons or links
Anatomy
- Heading: optional
- Paragraph: required
- Close: required
- Caret: placement is bottom by default but is set up to change based on browser position
- Access point: how tooltip is triggered
Demos & variations
Below are the various access points that can be used with the tooltip pattern
Dashed underline
Dashed underline access point can be individual words or phrases that need more explanation and is the default implementation of tooltips.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Interactive Footnotes
Footnotes that are interactive use a superscript number as the access point and can be in paragraphs or lists to denote citations or references.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.2
Icon button
Icon button access point can be included on field labels or at the end of statements that need more explanation. It should be used in instances where you want to give more explanation around an entire statement or sentence.
Lorem ipsum dolor sit amet, consectetur adipiscing elit 
Behaviors
If there are multiple tooltips on the page, only one can be open at a time. Opening a tooltip when another tooltip is open will close that first opened tooltip.
Mouse
- Hovering on access point should change the cursor
- Clicking on access point will open tooltip
- Clicking outside of the tooltip will close it
- Clicking on the close button will close the tooltip
Keyboard
- Tab to trigger element and hit enter to open
- Tab to close button and hit enter to close
- Tab away from an open tooltip, tooltip should automatically close