diff --git a/docs/pages/tooltips.md b/docs/pages/tooltips.md index 01fc674af..7e3d15dc3 100644 --- a/docs/pages/tooltips.md +++ b/docs/pages/tooltips.md @@ -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 @@ -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: "" ---