[adityalenova]

What

Tooltip (v1) fades its bubble in with tooltip-appear unconditionally, while TooltipV2 runs the same keyframes behind @media screen and (prefers-reduced-motion: no-preference) with the comment "Only show animations if users don't have a preference for reduced motion". Closes #8650.

The part worth reading before reviewing

.Tooltip::after sets opacity: 0 and depends on animation-fill-mode: forwards to reach opacity: 1. So the usual "move the animation into the media query" change would leave reduced-motion visitors with a tooltip that never appears. This change therefore makes the visible state the default and treats the fade as the enhancement:

.Tooltip:hover::after,
.Tooltip:active::after,
.Tooltip:focus::after,
.Tooltip:focus-within::after {
  display: inline-block;
  text-decoration: none;
  opacity: 1;

  @media screen and (prefers-reduced-motion: no-preference) {
    animation-name: tooltip-appear;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-delay: 0s;
  }
}

opacity: 1 is exactly the value the animation lands on, so the animated result is unchanged; .Tooltip::after still keeps the bubble transparent while it is not interacted with.

Verification

Two e2e tests added to e2e/components/Tooltip.test.ts. toHaveCSS cannot target a pseudo-element, so they read the computed style of ::after on the trigger:

$ npx playwright test e2e/components/Tooltip.test.ts -g "bubble"
  2 passed (3.8s)

• reducedMotion: 'reduce' → animation-name: none, opacity: '1', bubble visible on hover (this is the regression the default-visible rule prevents).
• reducedMotion: 'no-preference' → animation-name still resolves to tooltip-appear, and the computed opacity still ends at '1'.

npx stylelint packages/react/src/Tooltip/Tooltip.module.css is clean and npx prettier --check passes on all three files. A changeset is included (patch).

Note

I know this component is deprecated - the story lives under Deprecated/Components/Tooltip and is flagged there. The change is four lines and makes v1 behave the way v2 already does. It is still exported to consumers from @primer/react/deprecated, so existing users on that entry point get the fix too — but if you would rather spend no review time on deprecated code, say so and I will close this and keep the issue open for whoever picks up the removal.

[changeset-bot]

🦋 Changeset detected

Latest commit: f079b51

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.

[adityalenova]

@llastflowers I hope you have seen the pull request. I would be delighted if you suggest any modifications related to this pull request.