USWDS - Tooltip: Make tooltip content hoverable #5919

amyleadem · 2024-05-09T21:40:44Z

Summary

Updated the behavior of tooltip to allow hover over tooltip content. This allows the component to meet the "hoverable" standard outlined in WCAG 1.4.13.

Note

This issue is slated to be in the same release as #5909, which also edits the tooltip JavaScript. We should confirm there are no conflicts between the two PRs.

Breaking change

This is not a breaking change.

Related issue

Closes #5918

Related pull requests

Changelog PR

Preview link

Before	After
Tooltip	Feature preview

Problem statement

Success Criterion 1.4.13 Content on Hover or Focus states that for tooltip content must be hoverable:

Hoverable
If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;

The tooltip component does not currently meet this criteria.

Solution

Updated the method for detecting how and when the mouse leaves the tooltip. These were the main changes to accomplish this:

Attached the event listener to the usa-tooltip wrapper, rather than usa-tooltip__trigger. This added the usa-tooltip__body element to the hit target.
Replaced mouseout with mouseleave. This allowed us to trigger hideTooltip only when the mouse left all elements inside the wrapper, rather than triggering after it left each element.
Removed the pointer-events: none; style declaration. This allowed mouseleave to include usa-tooltip__body in the hit target.

Testing and review

Confirm that you move your mouse into the tooltip content without the tooltip closing
Confirm that you can move your mouse into the small space between the tooltip and the tooltip trigger without the tooltip closing
Confirm that the toolip closes when you leave the .usa-tooltip hit boundary
Confirm the code meets standards.
Confirm the code is compatible with the solution in USWDS - Tooltip: Make tooltip dismissible with escape key #5909

Note

There is a pre-existing issue with the social media icon tooltips in the tooltip test story.

- Mouseleave makes the tooltip hoverable - it lets us target usa-tooltip

- This enables the tooltip to be hoverable

- This prevents mouseleave from triggering in the empty space b/t tooltip and trigger

amyleadem · 2024-05-09T21:51:20Z

packages/usa-tooltip/src/styles/_usa-tooltip.scss

+    content: "";
+    display: block;
+    position: absolute;
+  }
 }


Note
I added these before pseudo elements to fill the gap between the tooltip trigger and tooltip. Filling this gap prevents mouseleave from triggering when the mouse enters that gap when trying to hover over the tooltip.

amyleadem · 2024-05-09T21:53:04Z

packages/usa-tooltip/src/styles/_usa-tooltip.scss

@@ -28,7 +28,6 @@ $triangle-size: 5px;
  font-size: size("ui", $theme-tooltip-font-size);
  opacity: 0; // Required for recalculating position.
  padding: units(1);
-  pointer-events: none;


Note
We needed to remove the pointer-event styles here because they were causing the tooltip to be removed from the usa-tooltip hit boundary. This caused mouseleave to be triggered when hovering over the tooltip.

amyleadem · 2024-05-09T21:59:35Z

packages/usa-tooltip/src/index.js

Note
To prevent the tooltip from closing when you move the mouse out of the tooltip trigger, we needed to:

Target the usa-tooltip wrapper instead of the tooltip trigger, and

Replace mouseout with mouseleave. mouseleave only triggers when the mouse has exited the element and all its descendents, whereas mouseout triggers with each element in the group. See reference below for more details:

"...mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element)." ¹

Footnotes

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event ↩

amyleadem · 2024-05-10T23:06:37Z

@mejiaj and @mahoneycm, this still needs JSDoc comments and probably a unit test, but opening this review now so that we can start discussing if there are ways to write this code that better align with standards.

packages/usa-tooltip/src/index.js

mejiaj

Thanks for taking this on.

I hope you don't mind I've edited the PR description. I've simplified the summary for clarification (now its clear we're adding support to the tooltip body). As well as adding a table with preview links to the before/after state for easier testing.

This new behavior means we'll have to re-think our current approach to showing/hiding the tooltip. Right now it's listening for any mouseover on the trigger. We should consider either:

Toggling visibility on TOOLTIP, instead of TOOLTIP_TRIGGER.
Using mouseleave, but ensuring it's only added once and removed on teardown.

packages/usa-tooltip/src/index.js

amyleadem · 2024-05-15T22:27:57Z

packages/usa-tooltip/src/test/test-patterns/test-usa-tooltip-no-wrapper.twig

Note
I added this test because I discovered that my original fixes had the mouse events targeting the wrong tooltips when there were multiple tooltips on the page and no wrappers around the tooltips. This might not be needed moving forward, but wanted to push it up to confirm the fix is still working. We can remove before merge if this test feels confusing.

Good catch here! Glad to see it's still working if the component is built this way.

mahoneycm

Getting close! A couple small changes I wanted to run by you to make sure we're covering all bases.

packages/usa-tooltip/src/styles/_usa-tooltip.scss

packages/usa-tooltip/src/test/tooltips.spec.js

mahoneycm · 2024-05-16T15:26:32Z

packages/usa-tooltip/src/test/test-patterns/test-usa-tooltip-no-wrapper.twig

Good catch here! Glad to see it's still working if the component is built this way.

packages/usa-tooltip/src/index.js

- will be added to #5919 instead

- Not needed for this PR; will be added in #5909

mejiaj

Minor changes request to pseudoelement format & suggestion for JS. Otherwise LGTM.

packages/usa-tooltip/src/styles/_usa-tooltip.scss

mejiaj · 2024-05-17T21:37:40Z

packages/usa-tooltip/src/index.js

+        wrapper.addEventListener("mouseleave", () => {
+          hideToolTip(body);
+        });


Follows the same pattern in teardown line 400.

Suggested change

wrapper.addEventListener("mouseleave", () => {

hideToolTip(body);

});

wrapper.addEventListener("mouseleave", () => hideToolTip(body));

Updated in d4ca8c3

amyleadem · 2024-05-17T22:05:26Z

@amycole501 and @alex-hull can you confirm that the tooltip now conforms with the "hoverable" criteria in WCAG 1.4.13?

amycole501

I tested the hoverable action and yes, it is now able to be hovered over with a mouse and then when I move the mouse over the tooltip it does NOT disappear.

amyleadem · 2024-05-17T22:15:53Z

Sorry @amycole501, I accidentally re-requested your review, which cleared the green approval check 🤦

The `$triangle-size` variable isn't a parameter, so removed from SASSDoc comment.

USWDS - Tooltip: Create a mixin for the tooltip spacer

mahoneycm

Great work here! Functionality is working like a charm

Testing checklist

Confirm that you move your mouse into the tooltip content without the tooltip closing
Confirm that you can move your mouse into the small space between the tooltip and the tooltip trigger without the tooltip closing
Confirm that the toolip closes when you leave the .usa-tooltip hit boundary
Confirm the code meets standards.
Confirm the code is compatible with the solution in USWDS - Tooltip: Make tooltip dismissible with escape key #5909

mejiaj

No issues found. Tested in Safari, Firefox, and Chromium.

Thanks for adding the tests.

…tip-hoverable

thisisdano

Very nice. Both features work together as expected

amyleadem added 3 commits May 9, 2024 14:10

Replace mouseout w/mouseleave; add closeTooltip()

f492137

- Mouseleave makes the tooltip hoverable - it lets us target usa-tooltip

Remove point-event:none from tooltip

2978e28

- This enables the tooltip to be hoverable

Add empty pseudo element to tooltip

4f1e343

- This prevents mouseleave from triggering in the empty space b/t tooltip and trigger

amyleadem commented May 9, 2024

View reviewed changes

amyleadem mentioned this pull request May 9, 2024

USWDS - Tooltip: Make tooltip dismissible with escape key #5909

Merged

Run prettier

3a3e1af

This was referenced May 9, 2024

USWDS - Draft release notes for 3.8.1 #5912

Open

USWDS-Site - Changelog: Tooltip hoverable fix [#5919] uswds/uswds-site#2661

Merged

USWDS-Site: Documentation updates for 3.8.1 uswds/uswds-site#2654

Draft

amyleadem marked this pull request as ready for review May 10, 2024 23:06

amyleadem commented May 10, 2024

View reviewed changes

packages/usa-tooltip/src/index.js Outdated Show resolved Hide resolved

mejiaj requested changes May 14, 2024

View reviewed changes

packages/usa-tooltip/src/index.js Outdated Show resolved Hide resolved

amyleadem added 9 commits May 15, 2024 07:27

Move mouseleave listener to init

87cf905

Update mouseleave listener - add trigger param

ced5066

Remove hideTooltipOnMouseleave()

6c34128

Restore hideTooltipOnMouseleave; add teardown

5d2dae0

Add no wrapper tooltip test

afa116f

Add unit test for hoverable tooltip content

ae40ea7

Replace mouseout test with mouseleave

adfdc0c

Run prettier

b530631

Remove console.log

37422c4

amyleadem commented May 15, 2024

View reviewed changes

amyleadem requested a review from mahoneycm May 15, 2024 22:28

Remove hideTooltipOnMouseleave()

32e113c

mahoneycm requested changes May 16, 2024

View reviewed changes

mahoneycm reviewed May 16, 2024

View reviewed changes

packages/usa-tooltip/src/index.js Show resolved Hide resolved

amyleadem added a commit that referenced this pull request May 16, 2024

Remove mouseover/mouseout unit tests

0315790

- will be added to #5919 instead

Remove escape from EVENTS

04124a3

- Not needed for this PR; will be added in #5909

amyleadem requested a review from mejiaj May 17, 2024 16:53

amyleadem mentioned this pull request May 17, 2024

USWDS-Site: Add tooltip accessibility tests page uswds/uswds-site#2646

Open

mejiaj requested changes May 17, 2024

View reviewed changes

amyleadem added 2 commits May 17, 2024 14:59

Add comment to before element; use double colons for pseudo elements

39534b5

Format init event listener

d4ca8c3

amyleadem requested review from amycole501 and alex-hull May 17, 2024 22:04

amycole501 approved these changes May 17, 2024

View reviewed changes

amyleadem requested review from mahoneycm, amycole501 and mejiaj May 17, 2024 22:14

amycole501 approved these changes May 17, 2024

View reviewed changes

Create a mixin for the tooltip spacer

77a2769

mejiaj mentioned this pull request May 20, 2024

USWDS - Tooltip: Create a mixin for the tooltip spacer #5933

Merged

mejiaj and others added 3 commits May 20, 2024 10:20

Place variable above mixin

04dcd6b

Remove triangle size from mixin params

5bf3493

The `$triangle-size` variable isn't a parameter, so removed from SASSDoc comment.

Merge pull request #5933 from uswds/jm-tooltip-hoverable

babcc2a

USWDS - Tooltip: Create a mixin for the tooltip spacer

mahoneycm approved these changes May 20, 2024

View reviewed changes

mejiaj approved these changes May 20, 2024

View reviewed changes

mejiaj requested a review from thisisdano May 20, 2024 16:44

Merge branch 'develop' of https://github.com/uswds/uswds into al-tool…

1cbd67f

…tip-hoverable

thisisdano approved these changes May 22, 2024

View reviewed changes

thisisdano merged commit 114f6e5 into develop May 22, 2024
5 checks passed

thisisdano deleted the al-tooltip-hoverable branch May 22, 2024 22:44

amyleadem mentioned this pull request May 30, 2024

Add 3.8.1 notifications #5943

Merged

thisisdano mentioned this pull request May 30, 2024

USWDS 3.8.1 #5944

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

USWDS - Tooltip: Make tooltip content hoverable #5919

USWDS - Tooltip: Make tooltip content hoverable #5919

amyleadem commented May 9, 2024 •

edited

amyleadem May 9, 2024 •

edited

amyleadem May 9, 2024

amyleadem May 9, 2024

amyleadem commented May 10, 2024

mejiaj left a comment

amyleadem May 15, 2024 •

edited

mahoneycm May 16, 2024

mahoneycm left a comment

mahoneycm May 16, 2024

mejiaj left a comment

mejiaj May 17, 2024

amyleadem May 17, 2024

amyleadem commented May 17, 2024

amycole501 left a comment

amyleadem commented May 17, 2024

mahoneycm left a comment

mejiaj left a comment

thisisdano left a comment

USWDS - Tooltip: Make tooltip content hoverable #5919

USWDS - Tooltip: Make tooltip content hoverable #5919

Conversation

amyleadem commented May 9, 2024 • edited

Summary

Breaking change

Related issue

Related pull requests

Preview link

Problem statement

Solution

Testing and review

amyleadem May 9, 2024 • edited

Choose a reason for hiding this comment

amyleadem May 9, 2024

Choose a reason for hiding this comment

amyleadem May 9, 2024

Choose a reason for hiding this comment

Footnotes

amyleadem commented May 10, 2024

mejiaj left a comment

Choose a reason for hiding this comment

amyleadem May 15, 2024 • edited

Choose a reason for hiding this comment

mahoneycm May 16, 2024

Choose a reason for hiding this comment

mahoneycm left a comment

Choose a reason for hiding this comment

mahoneycm May 16, 2024

Choose a reason for hiding this comment

mejiaj left a comment

Choose a reason for hiding this comment

mejiaj May 17, 2024

Choose a reason for hiding this comment

amyleadem May 17, 2024

Choose a reason for hiding this comment

amyleadem commented May 17, 2024

amycole501 left a comment

Choose a reason for hiding this comment

amyleadem commented May 17, 2024

mahoneycm left a comment

Choose a reason for hiding this comment

Testing checklist

mejiaj left a comment

Choose a reason for hiding this comment

thisisdano left a comment

Choose a reason for hiding this comment

amyleadem commented May 9, 2024 •

edited

amyleadem May 9, 2024 •

edited

amyleadem May 15, 2024 •

edited