fix(tooltip): remove width override [#5612] [SWC-994]

[castastrophe]

Description

Consolidated all available CSS assets into a single tooltip.css file and removed duplicate styles from the shipped asset. Restructured similar styles together and removed unused styles to improve maintainability and reduce bundle size.

Note: Added a TODO comment on line 135 for the #tip[style] selector rule that needs additional documentation to explain its purpose and usage.

Motivation and context

The tooltip component had multiple CSS files that contained duplicate styles and unused code. This consolidation:

• Reduces bundle size by eliminating duplicate CSS rules
• Improves maintainability by having all styles in one location
• Removes unused styles that were not being applied
• Groups related styles together for better organization

Related issue(s)

• fixes [Bug]: Tooltip max-width overrides --mod variable #5612
• SWC-994

Screenshots (if appropriate)

N/A - CSS consolidation only

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Manual review test cases

• Basic tooltip functionality with all variants

  1. Go to Storybook Tooltip stories
  2. Test each variant (default, info, positive, negative) with different placements
  3. Verify tooltips display correctly with proper styling and positioning
  4. Expect consistent appearance across all variants and placements

• Tooltip placement and positioning

  1. Go to Storybook Overlaid tooltip stories
  2. Test all placement options (top, bottom, left, right, top-start, top-end, etc.)
  3. Verify tooltip tips (arrows) point in correct directions
  4. Expect proper positioning relative to trigger elements

• Tooltip animations and transitions

  1. Go to Storybook Self-managed tooltip story
  2. Hover over trigger elements to show tooltips
  3. Verify smooth fade-in/fade-out animations
  4. Expect consistent animation timing and easing

• Tooltip in RTL (right-to-left) layout

  1. Go to Storybook Tooltip stories
  2. Set page direction to RTL (dir="rtl")
  3. Test tooltip placements, especially corner placements (top-start, top-end, etc.)
  4. Verify tooltip tips and positioning adapt correctly to RTL layout

• High contrast mode support

  1. Go to Storybook Tooltip stories
  2. Enable high contrast mode in browser/system settings
  3. Test all tooltip variants and placements
  4. Verify proper borders and contrast in high contrast mode

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5d4e947

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

📚 Branch Preview

• Documentation Site
• Storybook

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5653

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...

[rise-erpelding]

This is a great start of how/why we should do this since consolidating styles fixes not only the max-width bug, but also brings back some of the placement options that didn't work before (top-start, top-end, bottom-start, bottom-end).

I also noticed looking over this that I'm not sure that the right-start, right-end, left-start, and left-end placements are doing anything. I didn't see styles for them. There are also some placement options available in CSS that we don't use here, like right top, right bottom, end top, end bottom, etc. Something we could add later on if we wanted to!

[rise-erpelding]

Looks like top-start, top-end, bottom-start, and bottom-end all aren't working as expected on the main branch, here they're fixed so that they actually work now 🎉

[rise-erpelding]

I think the clip-paths here and also for the corresponding [placement*="left"] may be the same, it might be possible to eliminate the rtl clip-path. I'm less sure about inset-inline vs. left/right but if we were to do this for real this seems like a good opportunity to start using logical properties.

[castastrophe]

I believe we used left and right here with the intention that we didn't want it to respond to changes in language direction. Our docs are meant to guide users to start and end as the preferred but for use-cases where they want positioning fixed regardless of language, these are available.