Visitar URL original
USWDS - Tooltip: Make tooltip content hoverable by amyleadem · Pull Request #5919 · uswds/uswds · GitHub
Skip to content

USWDS - Tooltip: Make tooltip content hoverable #5919

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thisisdano merged 22 commits into from
May 22, 2024
Merged

USWDS - Tooltip: Make tooltip content hoverable #5919

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
f492137
Replace mouseout w/mouseleave; add closeTooltip()
May 9, 2024
2978e28
Remove point-event:none from tooltip
May 9, 2024
4f1e343
Add empty pseudo element to tooltip
May 9, 2024
3a3e1af
Run prettier
May 9, 2024
87cf905
Move mouseleave listener to init
May 15, 2024
ced5066
Update mouseleave listener - add trigger param
May 15, 2024
6c34128
Remove hideTooltipOnMouseleave()
May 15, 2024
5d2dae0
Restore hideTooltipOnMouseleave; add teardown
May 15, 2024
afa116f
Add no wrapper tooltip test
May 15, 2024
ae40ea7
Add unit test for hoverable tooltip content
May 15, 2024
adfdc0c
Replace mouseout test with mouseleave
May 15, 2024
b530631
Run prettier
May 15, 2024
37422c4
Remove console.log
May 15, 2024
32e113c
Remove hideTooltipOnMouseleave()
May 16, 2024
04124a3
Remove escape from EVENTS
May 17, 2024
39534b5
Add comment to before element; use double colons for pseudo elements
May 17, 2024
d4ca8c3
Format init event listener
May 17, 2024
77a2769
Create a mixin for the tooltip spacer
May 20, 2024
04dcd6b
Place variable above mixin
May 20, 2024
5bf3493
Remove triangle size from mixin params
May 20, 2024
babcc2a
Merge pull request #5933 from uswds/jm-tooltip-hoverable
amyleadem May 20, 2024
1cbd67f
Merge branch 'develop' of https://github.com/uswds/uswds into al-tool…
May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Merge branch 'develop' of https://github.com/uswds/uswds into al-tool… 
…tip-hoverable
  • Loading branch information
amyleadem
amyleadem committed May 22, 2024
commit 1cbd67ff2a4236fad78e69887ee1005599adf3ab
14 changes: 14 additions & 0 deletions packages/usa-tooltip/src/index.js
View file
Open in desktop

@amyleadem amyleadem May 9, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note

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

  1. Target the usa-tooltip wrapper instead of the tooltip trigger, and
  2. 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)." 1

Footnotes

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

Original file line number Diff line number Diff line change
Expand Up @@ -359,6 +359,20 @@ const setUpAttributes = (tooltipTrigger) => {
return { tooltipBody, position, tooltipContent, wrapper };
};

/**
* Hide all active tooltips when escape key is pressed.
*/

const handleEscape = () => {
const activeTooltips = selectOrMatches(`.${TOOLTIP_BODY_CLASS}.${SET_CLASS}`);

if (!activeTooltips) {
return;
}

activeTooltips.forEach((activeTooltip) => hideToolTip(activeTooltip));
};

// Setup our function to run on various events
const tooltip = behavior(
{
Expand Down
14 changes: 14 additions & 0 deletions packages/usa-tooltip/src/test/tooltips.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ const EVENTS = {

el.dispatchEvent(mouseleaveEvent);
},
escape(el) {
const escapeKeyEvent = new KeyboardEvent("keydown", {
key: "Escape",
bubbles: true,
});

el.dispatchEvent(escapeKeyEvent);
},
};

tests.forEach(({ name, selector: containerSelector }) => {
Expand Down Expand Up @@ -90,6 +98,12 @@ tests.forEach(({ name, selector: containerSelector }) => {
assert.strictEqual(tooltipBody.classList.contains("is-set"), true);
});

it("tooltip is hidden on escape keydown", () => {
tooltipTrigger.focus();
EVENTS.escape(tooltipTrigger);
assert.strictEqual(tooltipBody.classList.contains("is-set"), false);
});

it("should not allow for innerHTML of child elements ", () => {
// override the template
body.innerHTML = `<button class="usa-button usa-tooltip" title="Apricot &lt;img src='' onerror=alert('ouch')&gt;">Button</button>`;
Expand Down
You are viewing a condensed version of this merge commit. You can view the full changes here.