Skip to content

Commit

Permalink
Update tooltips page content
Browse files Browse the repository at this point in the history
  • Loading branch information
contolini committed Oct 24, 2024
1 parent f200b2e commit 877655e
Showing 1 changed file with 20 additions and 13 deletions.
33 changes: 20 additions & 13 deletions docs/pages/tooltips.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ collection_name: pages
layout: variation
section: components
status: Beta
description: A tooltip is a short descriptive message that appears when a user
hovers or focuses on an element. They display helpful but non-critical
information and are useful in space-constrained user interfaces.
description: A tooltip provides short, descriptive information when a user
hovers or focuses on an element. It contains helpful but non-critical
information and is useful in a space-constrained user interface.
variation_groups:
- variations:
- variation_is_deprecated: false
Expand All @@ -23,18 +23,25 @@ variation_groups:
variation_group_name: Standard tooltip
variation_group_description: ""
guidelines: Tooltips should be activated by hovering or focusing over a help
(question mark) icon that is next to text that requires additional clarity.
They contain standard size body text and an optional `h3` heading.
guidelines: Be judicious in using tooltips and explore other design options that
keep content visible before choosing to use a tooltip. Only consider using a
tooltip for short, non-critical information in a space-constrained user
interface. Because a tooltip is hidden until activated, ensure content within
a tooltip is not essential for completing a task on the page. For more
guidance, see the [USWDS tooltip
page](https://designsystem.digital.gov/components/tooltip/).
eyebrow: Components
behavior: Pressing the `esc` key should dismiss all open tooltips. When a
tooltip is at the edge of the user's viewport, it should automatically
reorient itself away from the edge of the screen to prevent content clipping.
accessibility: >-
Tooltips are progressive enhancements for the `title` attribute, and will
display as the `title` attribute if the component doesn’t initialize.
behavior: >
- Activate a tooltip by hovering or focusing on a help (question mark) icon
situated next to text.
- Press the escape key to dismiss open tooltips.
When testing tooltips for accessibility, ensure they are compliant with [USWDS' guidelines](https://designsystem.digital.gov/components/tooltip/accessibility-tests/).
- When a tooltip is at the edge of the user’s viewport, it should automatically reorient itself away from the edge of the screen to prevent content clipping.
accessibility: As USWDS states, tooltips are progressive enhancements for the
title attribute and will display as the title attribute if the component
doesn’t initialize. When testing tooltips for accessibility, ensure they are
compliant with [USWDS tooltip accessibility
tests](https://designsystem.digital.gov/components/tooltip/accessibility-tests/).
related_items: ""
---

0 comments on commit 877655e

Please sign in to comment.