chore: Update ToolTip to default to be dismissed after parent target is clicked

[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 061b086

---

☁️ Nx Cloud last updated this comment at 2026-07-08 20:35:36 UTC

[codecov]

Codecov Report

❌ Patch coverage is 94.11765% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.10%. Comparing base (c9200cc) to head (061b086).
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
packages/gamut/src/Tip/shared/FloatingTip.tsx	80.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3388      +/-   ##
==========================================
- Coverage   90.55%   90.10%   -0.46%     
==========================================
  Files         398      270     -128     
  Lines        6586     5699     -887     
  Branches     2141     1924     -217     
==========================================
- Hits         5964     5135     -829     
+ Misses        613      555      -58     
  Partials        9        9              

Flag	Coverage Δ
main	?
pull-request	90.10% <94.11%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[LinKCoding]

very similar to still including info as a prop, where it gets overridden if tipProps includes info --
where if tipProps doesn't include closeOnClick, then closeOnClick becomes the default (the ToolTip disappears after the target is clicked)

[codecademydev]

📬 Published Alpha Packages:

Package	Version	npm	Diff
@codecademy/gamut	72.2.5-alpha.75f51e.0	npm	diff
@codecademy/gamut-icons	9.57.11-alpha.75f51e.0	npm	diff
@codecademy/gamut-illustrations	0.58.16-alpha.75f51e.0	npm	diff
@codecademy/gamut-kit	3.0.9-alpha.75f51e.0	npm	diff
@codecademy/gamut-patterns	0.10.35-alpha.75f51e.0	npm	diff
@codecademy/gamut-styles	20.0.3-alpha.75f51e.0	npm	diff
@codecademy/gamut-tests	6.0.6-alpha.75f51e.0	npm	diff
@codecademy/variance	0.26.2-alpha.75f51e.0	npm	diff
eslint-plugin-gamut	2.4.4-alpha.75f51e.0	npm	diff

[github-actions]

🚀 Styleguide deploy preview ready!

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