# Tooltip

Tooltips provide additional information upon hover, focus or click. The information should be contextual, useful, and nonessential information.

## Guidance

**Theme: medicare only**

- Use a dashed underline link design.
- Use a hover over interaction on desktop and click to activate on mobile.
- Appear next to the linked term.
- Words inside a tooltip won't break over lines for legibility.
- A tooltip link can break over lines, if needed.
- When the tooltip defines a term: Repeat the linked term at the top of the tool tip (bold styling).

  Have space for next line of text be a soft-return (single line spacing).
- When the tooltip is just contextual help: Don't include the linked term at the top of the tooltip.

### Content guidelines

- Limit text to no more than 240 characters for optimum user experience.
- If required to include a legal disclaimer to point to [Medicare glossary](https://www.medicare.gov/glossary), the disclaimer isn't included in character count.
- If more than 300 characters, use a help drawer instead of a tool tip.

### When to use

- Use for helpful, non-critical information to strengthen an existing message.
- Use to increase certainty and enhance confidence about an interaction.
- Use with brief descriptions as tooltips perform best with succinct text.
- Tooltips are useful as a last resort for space-constrained UI. Explore other options for keeping content visible without a tooltip.

### When to consider alternatives

- Don’t hide information necessary for completing a task behind a tooltip interaction.
- Tooltips are microcopy and should be brief. Don't use a tooltip if you need a lot of text.
- Don’t use a tooltip when its content is repetitive or if usability is obvious.
- If content can fit outside a tooltip, don't use a tooltip.

### Accessibility

#### Accessibility
- Tooltip content should not cover other interactive elements or important information.
- When moving the pointer over an active tooltip, the tooltip should stay open.
- Tooltip content must appear after a short amount of time, when focus changes in response to a mouse hover, or after the parent element receives keyboard focus.
- Active tooltips should have the ability to be dismissed by pressing the escape key.
- Ensure that open tooltips do not block or obscure vital information or interactive elements on the page, allowing users to access all necessary content without interference.

### Accessibility testing

#### General accessibility testing
- Using zoom should not obstruct the tooltip or other content – when zooming to 200%, the tooltip content should remain visible.

#### Keyboard testing
- Tooltips must be accessible with only a keyboard.
- When pressing the “tab” key, the user should be able to navigate to the tooltip and activate the tooltip.
- Pressing the escape key while the tooltip is active, should close the tooltip.
- When opening a tooltip, the user should be able to navigate in and out of the trigger component without difficulty so that the tooltip does not trap the user or move the user around the page unwillingly.
- The focus indicator should be clearly visible around the trigger element.

#### Screenreader testing
- Use screen readers (e.g., NVDA, JAWS, VoiceOver) to verify that tooltips are announced correctly.
- When focusing on the tooltip trigger, the screen reader should announce the tooltip content.
- When listening to the tooltip with a screen reader, the user should first hear the trigger element content, then the tooltip content, followed by the next content on the page.