first attempt at closing tooltip after click

[LinKCoding]

Overview

Adds close-on-click behavior to ToolTip and IconButton tooltips. By default, hovering over an IconButton shows its tooltip — clicking the button now immediately hides it, requiring the cursor to leave and re-enter before it reappears. An opt-out (closeOnClick={false}) supports patterns like copy → copied where the tooltip should stay visible after the click.

• Added closeOnClick prop to ToolTipProps and TipPlacementComponentProps
• Implemented suppress/unsuppress state in InlineTip using a CSS suppress state on ToolTipWrapper that overrides the base :hover styles by injection order
• Used data-tooltip-body attribute to target only the tooltip body element in the CSS selector, avoiding interference with TargetContainer
• Switched show/hide CSS from :focus-within to :has(:focus-visible) to prevent mouse-click focus from keeping the tooltip alive
• Added relatedTarget instanceof Node guard on onMouseEnter/onMouseLeave to skip synthetic events fired when tooltip visibility changes
• IconButton now passes closeOnClick by default; override via tipProps={{ closeOnClick: false }}
• Extended FloatingTip to forward closeOnClick to the inner tip
• Updated MenuItem tooltip element to align with blur-close behavior
• Added unit tests to IconButton.test.tsx covering closeOnClick scenarios
• Added CloseOnClick story to both IconButton.stories.tsx and ToolTip.stories.tsx with floating/inline variants; updated corresponding MDX docs

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-1666
• Version plan added/updated (or not needed)
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

1. Open the IconButton story in Storybook and hover over any IconButton — the tooltip should appear. Click the button; the tooltip should disappear immediately even though the cursor is still hovering. Move the cursor off and back on — the tooltip should reappear normally.
2. Open the IconButton › Close on Click story. Verify the first two buttons (floating and inline) close on click, and the last two (floating and inline with closeOnClick={false}) stay open after clicking.
3. Open the ToolTip › Close on Click story. Verify the same four-button pattern using StrokeButton wrapped in <ToolTip> directly — two close on click, two stay open.
4. Tab to an IconButton using keyboard only — the tooltip should appear on :focus-visible and should not be suppressed by a prior mouse click.
5. Check it with VO
6. Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit e4cfa8d

---

☁️ Nx Cloud last updated this comment at 2026-07-01 20:53:26 UTC

[codecov]

⚠️ JUnit XML file not found

The CLI was unable to find any JUnit XML files to upload.
For more help, visit our troubleshooting guide.

[codecademydev]

📬 Published Alpha Packages:

Package	Version	npm	Diff
@codecademy/gamut	72.2.3-alpha.e0a618.0	npm	diff
@codecademy/gamut-icons	9.57.10-alpha.e0a618.0	npm	diff
@codecademy/gamut-illustrations	0.58.16-alpha.e0a618.0	npm	diff
@codecademy/gamut-kit	3.0.7-alpha.e0a618.0	npm	diff
@codecademy/gamut-patterns	0.10.35-alpha.e0a618.0	npm	diff
@codecademy/gamut-styles	20.0.3-alpha.e0a618.0	npm	diff
@codecademy/gamut-tests	6.0.6-alpha.e0a618.0	npm	diff
@codecademy/variance	0.26.2-alpha.e0a618.0	npm	diff
eslint-plugin-gamut	2.4.4-alpha.e0a618.0	npm	diff

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://6a457f13fff259465eba665b--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/6a457f13fff259465eba665b