[Project Solar / Phase 1 / Components] TooltipButton carbonization

[dchyun]

📌 Summary

This PR carbonizes the TooltipButton component and the hdsTooltip modifier and adds component tokens for them to the tokens library.

Tooltip carbonization page

🛠️ Detailed description

Summary of changes

• Aligned typography, colors, paddings, other foundational styles
• Align caret icons (see notes below)

One significant change is to the caret icon that is rendered next to the tooltip. Currently the tippjs config for the tooltip adds an svg for the caret icon. In Carbon however, the caret is rendered with css along using clip-path: polygon(0 100%, 50% 0, 100% 100%);.

To accommodate both of these use cases the SVG for the tooltip icon in HDS has been converted to be rendered through a clip-path using the path() value. A variable --token-tooltip-caret-clip-path has been created with a clip-path value for each theme.

🔗 External links

Jira ticket: HDS-5062
Figma file: [if it applies]

---

👀 Component checklist

• Percy was checked for any visual regression

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hds-showcase	Ready	Preview	Feb 25, 2026 3:18pm
hds-website	Ready	Preview	Feb 25, 2026 3:18pm

[didoo]

@dchyun consider rebasing this on #3572 so you have all the latest foundational tokens

[dchyun]

[Note] There are existing tooltip variables of the format color.foreground.primary and color.surface.primary. This does not match the expected format for color variables. Additional color variables foreground.color and surface.color have been added and leveraged in the component.

For now I have left these existing color variables included, as I believe it would be a breaking change to remove them, but they could be removed in the future.