feat(tooltip): react|wc parity #21018

maradwan26 · 2025-11-13T18:15:04Z

Closes #20838
Closes #20963

Fixes bugs for cds-tooltip, aligns WC stories with React, and adds controls to all stories

Changelog

React

New

Added controls to all stories
Added TODO comments to remove the highContrast prop in the next major release
- highContrast should always be true for the Tooltip component, it should not be configurable

Changed

Changed the options for the align prop to use -start -end alignments instead of the deprecated -left -top -right -bottom

Removed

Removed highContrast from the control panel and the props table in the Overview page

Web Components

New

Added controls to all stories
Fixed a bug where the tooltip caret was not visible when using autoalign
- I also noticed a small visual bug with the cds-popover caret during bottom and right alignments when using border and autoalign, I fixed it in this PR, too.
Fixed a bug with the top/bottom-start/end alignments where the caret and content would get misaligned when the cds-tooltip-content text was short

Changed

Changed all stories to align with the React storybook

Testing / Reviewing

Web Components

Tooltip functionality and styles should be aligned with React
Storybook controls should work as expected

React

Storybook controls should work as expected

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

Reviewed every line of the diff
Updated documentation and storybook examples
~~[ ] Wrote passing tests that cover this change~~
Addressed any impact on accessibility (a11y)
Tested for cross-browser consistency
Validated that this code is ready for review and status checks should pass

netlify · 2025-11-13T18:23:19Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`a4fbd7b`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6916202be851880008a5b6e5
😎 Deploy Preview	https://deploy-preview-21018--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-11-13T18:24:00Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`a4fbd7b`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/6916202b2ab9800008c367f9
😎 Deploy Preview	https://deploy-preview-21018--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-11-13T18:25:31Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`a4fbd7b`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6916202b4c1f2c000848ee1c
😎 Deploy Preview	https://deploy-preview-21018--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

codecov · 2025-11-13T18:26:03Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 92.58%. Comparing base (b13440b) to head (de40320).

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #21018      +/-   ##
==========================================
- Coverage   92.59%   92.58%   -0.01%     
==========================================
  Files         515      515              
  Lines       38219    38219              
  Branches     5864     5802      -62     
==========================================
- Hits        35387    35385       -2     
- Misses       2682     2685       +3     
+ Partials      150      149       -1

Flag	Coverage Δ
main-packages	`85.58% <100.00%> (ø)`
web-components	`96.87% <100.00%> (-0.01%)`	⬇️

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

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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

netlify · 2025-11-13T18:29:14Z

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	`de40320`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/691f55997ca5a900083acc92
😎 Deploy Preview	https://deploy-preview-21018--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-11-13T18:32:30Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`de40320`
🔍 Latest deploy log	https://app.netlify.com/projects/carbon-elements/deploys/691f5599ae218a0008c63ae2
😎 Deploy Preview	https://deploy-preview-21018--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-11-13T18:33:25Z

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`de40320`
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/691f559930f30700088d320b
😎 Deploy Preview	https://deploy-preview-21018--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

heloiselui · 2025-11-14T17:50:40Z

Hey @maradwan26 looking great, just noticed some things:

WC:

dropShadow: I think it should be set to false by default.
Tooltip > Alignment: When I set defaultOpen = true and label = "Test", the tooltip appears little off.

Screen.Recording.2025-11-14.at.17.25.55.mov

maradwan26 · 2025-11-14T20:44:41Z

@heloiselui

dropShadow: I think it should be set to false by default.

Fixed ✅

Tooltip > Alignment: When I set defaultOpen = true and label = "Test", the tooltip appears little off.

Thanks for noticing! This is an issue for -start and -end for the top and bottom alignments. So the fix had to be done in popover.scss, which is also used for:

ai-label
toggletip
tooltip
popover
popover (tabTip)

I fixed it here✅ and double checked to ensure there isn't any regression to the other components.

maradwan26 · 2025-11-14T20:49:01Z

Also noticed the cds-toggletip caret is broken, opened an issue for it

heloiselui

I just noticed a few minor things, but LGTM! 🚀

packages/web-components/src/components/tooltip/tooltip.stories.ts

packages/web-components/src/components/tooltip/tooltip-story.scss

Co-authored-by: Heloise Lui <[email protected]>

feat(tooltip): react|wc parity

a4fbd7b

maradwan26 requested a review from a team as a code owner November 13, 2025 18:15

maradwan26 requested review from a team, emyarod, heloiselui and sunny-babbar and removed request for a team and emyarod November 13, 2025 18:15

maradwan26 added the status: visual review 🔍 label Nov 13, 2025

maradwan26 requested a review from tay1orjones November 13, 2025 18:15

Merge branch 'main' into tooltip-parity-work

c22e40d

maradwan26 deployed to @carbon/react storybook preview November 13, 2025 18:41 — with GitHub Actions View deployment

sunny-babbar approved these changes Nov 13, 2025

View reviewed changes

maradwan26 removed the status: visual review 🔍 label Nov 13, 2025

maradwan26 added 2 commits November 14, 2025 15:23

fix: content alignment and dropShadow

29601ea

fix: rtl

350d1b3

Merge branch 'main' into tooltip-parity-work

ca51d42

maradwan26 deployed to @carbon/react storybook preview November 14, 2025 21:14 — with GitHub Actions View deployment

Merge branch 'main' into tooltip-parity-work

3259213

Gururajj77 deployed to @carbon/react storybook preview November 18, 2025 09:36 — with GitHub Actions View deployment

heloiselui approved these changes Nov 19, 2025

View reviewed changes

heloiselui added the status: one more review 👀 label Nov 19, 2025

maradwan26 and others added 3 commits November 19, 2025 12:25

Update packages/web-components/src/components/tooltip/tooltip.stories.ts

19c33c1

Co-authored-by: Heloise Lui <[email protected]>

Update packages/web-components/src/components/tooltip/tooltip-story.scss

02e456a

Co-authored-by: Heloise Lui <[email protected]>

Update packages/web-components/src/components/tooltip/tooltip-story.scss

2cdf202

Co-authored-by: Heloise Lui <[email protected]>

maradwan26 deployed to @carbon/react storybook preview November 19, 2025 17:47 — with GitHub Actions View deployment

Merge branch 'main' into tooltip-parity-work

e052b58

maradwan26 deployed to @carbon/react storybook preview November 19, 2025 18:47 — with GitHub Actions View deployment

Merge branch 'main' into tooltip-parity-work

de40320

maradwan26 deployed to @carbon/react storybook preview November 20, 2025 18:11 — with GitHub Actions View deployment

feat(tooltip): react|wc parity #21018

Are you sure you want to change the base?

feat(tooltip): react|wc parity #21018

Conversation

maradwan26 commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

React

Web Components

Testing / Reviewing

PR Checklist

Uh oh!

netlify bot commented Nov 13, 2025

✅ Deploy Preview for v11-carbon-web-components ready!

Uh oh!

netlify bot commented Nov 13, 2025

✅ Deploy Preview for carbon-elements ready!

Uh oh!

netlify bot commented Nov 13, 2025

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

codecov bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-web-components ready!

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for carbon-elements ready!

Uh oh!

netlify bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for v11-carbon-react ready!

Uh oh!

heloiselui commented Nov 14, 2025

Uh oh!

maradwan26 commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

maradwan26 commented Nov 14, 2025

Uh oh!

heloiselui left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

maradwan26 commented Nov 13, 2025 •

edited

Loading

codecov bot commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

netlify bot commented Nov 13, 2025 •

edited

Loading

maradwan26 commented Nov 14, 2025 •

edited

Loading