feat(ui): add Tooltip primitive to @infrahub/ui

[pa-lem]

What

Adds a Tooltip primitive to the @infrahub/ui design system — a port of the app's existing react-aria tooltip (shared/components/aria/tooltip), converted to the design system's tailwind-variants convention.

Tooltip is one of the shared/components/ui primitives slated for migration into @infrahub/ui per dev/knowledge/frontend/design-system.md.

Scope

• New Tooltip component + Storybook story; exported from the barrel and as a ./tooltip subpath.
• No call-site migration — the 39 existing app usages keep the current shared tooltip (identical-looking) until the broader migration. This PR only adds the primitive.

Why now

It's the base dependency for a follow-up @infrahub/graph package (graph-view primitives) whose GraphControls needs a tooltip that isn't coupled to the app. Splitting it out keeps that change reviewable on its own.

🤖 Generated with Claude Code

---

Summary by cubic

Adds a Tooltip primitive to @infrahub/ui, ported from the app’s tooltip to use tailwind-variants. No call-site changes; this unblocks @infrahub/graph’s GraphControls.

• New Features
  • Tooltip wraps a trigger child and shows a message on hover/focus, built on react-aria-components.
  • Exported from the index and via @infrahub/ui/tooltip.
  • Storybook story added under Components/Tooltip.

^{Written for commit 25ad2e9. Summary will update on new commits.}

[cubic-dev-ai]

2 issues found across 4 files

Confidence score: 3/5

• There is some merge risk because a medium-severity, high-confidence issue in frontend/packages/ui/src/components/tooltip/tooltip.tsx can cause composed className styles to be overwritten, which may drop tooltip variant/animation behavior in the UI.
• A second issue in frontend/packages/ui/src/components/tooltip/tooltip.tsx uses a falsy check for message, so valid ReactNode values like 0 won’t render a tooltip; this is user-facing but lower severity.
• Pay close attention to frontend/packages/ui/src/components/tooltip/tooltip.tsx - prop spread/className merge order and message conditional rendering can both affect visible tooltip behavior.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="frontend/packages/ui/src/components/tooltip/tooltip.tsx">

<violation number="1" location="frontend/packages/ui/src/components/tooltip/tooltip.tsx:31">
P2: Using a falsy check on `message` hides valid ReactNode values (e.g. `0`) and skips rendering the tooltip.</violation>

<violation number="2" location="frontend/packages/ui/src/components/tooltip/tooltip.tsx:47">
P2: `className` composition is overridden by the later props spread, so tooltip variant/animation styles can be dropped.</violation>
</file>

<sub>Shadow auto-approve: would not auto-approve because issues were found.

Re-trigger cubic</sub>

[cubic-dev-ai]

P2: Using a falsy check on message hides valid ReactNode values (e.g. 0) and skips rendering the tooltip.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At frontend/packages/ui/src/components/tooltip/tooltip.tsx, line 31:

<comment>Using a falsy check on `message` hides valid ReactNode values (e.g. `0`) and skips rendering the tooltip.</comment>

<file context>
@@ -0,0 +1,66 @@
+
+/** Accessible tooltip. Wraps a trigger child and shows `message` on hover/focus. */
+export function Tooltip({ children, message, isOpen, onOpenChange, ...props }: TooltipProps) {
+  if (!message) {
+    return children;
+  }
</file context>

Suggested change

	if (!message) {
	if (message === null || message === undefined || message === "") {

[cubic-dev-ai]

P2: className composition is overridden by the later props spread, so tooltip variant/animation styles can be dropped.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At frontend/packages/ui/src/components/tooltip/tooltip.tsx, line 47:

<comment>`className` composition is overridden by the later props spread, so tooltip variant/animation styles can be dropped.</comment>

<file context>
@@ -0,0 +1,66 @@
+
+      <AriaTooltip
+        offset={10}
+        className={composeRenderProps(props.className, (className, renderProps) =>
+          tooltipStyles({ ...renderProps, className }),
+        )}
</file context>

Suggested change

	className={composeRenderProps(props.className, (className, renderProps) =>
	tooltipStyles({ ...renderProps, className }),
	)}
	{...props}
	{...props}
	className={composeRenderProps(props.className, (className, renderProps) =>
	tooltipStyles({ ...renderProps, className }),
	)}