Skip to content

Make tooltip links inside dialogs clickable#1255

Merged
annavik merged 1 commit into
mainfrom
hotfix/tooltip-links
Apr 19, 2026
Merged

Make tooltip links inside dialogs clickable#1255
annavik merged 1 commit into
mainfrom
hotfix/tooltip-links

Conversation

@annavik

@annavik annavik commented Apr 19, 2026

Copy link
Copy Markdown
Member

We had a problem where tooltip links were not clickable, but only when used inside dialogs. We fix the problem by skipping the portal.

Summary by CodeRabbit

  • Bug Fixes
    • Improved tooltip visibility and stacking order to prevent overlapping issues.

@netlify

netlify Bot commented Apr 19, 2026

Copy link
Copy Markdown

Deploy Preview for antenna-preview ready!

Name Link
🔨 Latest commit c530291
🔍 Latest deploy log https://app.netlify.com/projects/antenna-preview/deploys/69e4714895fe6700072207ba
😎 Deploy Preview https://deploy-preview-1255--antenna-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 75 (🔴 down 7 from production)
Accessibility: 97 (no change from production)
Best Practices: 92 (no change from production)
SEO: 100 (no change from production)
PWA: 80 (no change from production)
View the detailed breakdown and full score reports

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

@netlify

netlify Bot commented Apr 19, 2026

Copy link
Copy Markdown

Deploy Preview for antenna-ssec ready!

Name Link
🔨 Latest commit c530291
🔍 Latest deploy log https://app.netlify.com/projects/antenna-ssec/deploys/69e47148cfcebe0008b5e7f6
😎 Deploy Preview https://deploy-preview-1255--antenna-ssec.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@coderabbitai

coderabbitai Bot commented Apr 19, 2026

Copy link
Copy Markdown
Contributor
📝 Walkthrough

Walkthrough

Modified the InfoTooltip component to render Tooltip.Content directly under Tooltip.Root instead of wrapping it within Tooltip.Portal. Added a z-[51] Tailwind class to adjust stacking order.

Changes

Cohort / File(s) Summary
Tooltip Structure & Styling
ui/src/design-system/components/info-tooltip.tsx
Removed Tooltip.Portal wrapper from Tooltip.Content, moving it to render directly under Tooltip.Root. Added z-[51] class for z-index management.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A tooltip found a simpler way,
No portal needed to display,
With z-index raised up high above,
It floats with elegance and love! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The PR description is minimal and lacks most required sections. It provides only a brief explanation without addressing detailed description, testing instructions, or deployment notes from the template. Expand the description to include: detailed explanation of the portal/z-index changes, testing instructions, and confirmation of relevant checklist items from the template.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main fix: making tooltip links inside dialogs clickable, which matches the file change of adjusting z-index and portal rendering in the tooltip component.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch hotfix/tooltip-links

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
ui/src/design-system/components/info-tooltip.tsx (1)

21-23: Scope the portal bypass instead of changing every InfoTooltip.

This fixes the dialog case, but removing Tooltip.Portal globally changes positioning/clipping behavior for all InfoTooltip usages, while z-[51] now makes these tooltips out-rank dialog/popover layers that use z-index: 50 (dialog.module.scss:8-13, popover.module.scss:4-10). Prefer scoping the non-portaled behavior to dialog usage, or portal into the dialog container if Nova’s Tooltip API supports that.

Please verify against Nova UI Kit Tooltip behavior and test both cases:

  • tooltip link inside a dialog remains clickable;
  • tooltip outside a dialog does not render above an active dialog/popover or get clipped by overflow containers.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@ui/src/design-system/components/info-tooltip.tsx` around lines 21 - 23, The
change removed Tooltip.Portal and added a global z-[51], which forces all
InfoTooltip instances above dialogs/popovers; instead, restore Tooltip.Portal in
info-tooltip.tsx and remove the global z-[51], and add a scoped API to Info (or
InfoTooltip) to allow non-portaled rendering or a portal container: e.g., add
props like portalContainer?: HTMLElement | null or usePortal?: boolean, keep
default behavior using Tooltip.Portal, and when used inside the dialog pass a
container (or usePortal=false) from the dialog wrapper so that only
dialog-scoped tooltips bypass the portal; verify with Nova UI Kit Tooltip API
whether Tooltip.Portal accepts a container prop and update usage in the dialog
to pass the dialog element so that tooltip links remain clickable inside dialogs
and tooltips outside dialogs still respect dialog z-index and clipping.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@ui/src/design-system/components/info-tooltip.tsx`:
- Around line 21-23: The change removed Tooltip.Portal and added a global
z-[51], which forces all InfoTooltip instances above dialogs/popovers; instead,
restore Tooltip.Portal in info-tooltip.tsx and remove the global z-[51], and add
a scoped API to Info (or InfoTooltip) to allow non-portaled rendering or a
portal container: e.g., add props like portalContainer?: HTMLElement | null or
usePortal?: boolean, keep default behavior using Tooltip.Portal, and when used
inside the dialog pass a container (or usePortal=false) from the dialog wrapper
so that only dialog-scoped tooltips bypass the portal; verify with Nova UI Kit
Tooltip API whether Tooltip.Portal accepts a container prop and update usage in
the dialog to pass the dialog element so that tooltip links remain clickable
inside dialogs and tooltips outside dialogs still respect dialog z-index and
clipping.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 56e12f21-bc2e-42c2-bdc0-ebdd909d9f9d

📥 Commits

Reviewing files that changed from the base of the PR and between d0277da and c530291.

📒 Files selected for processing (1)
  • ui/src/design-system/components/info-tooltip.tsx

@annavik annavik merged commit c82fe02 into main Apr 19, 2026
7 checks passed
@annavik annavik deleted the hotfix/tooltip-links branch April 19, 2026 06:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant