fix(components): correct Tooltip and Popover arrow alignment (DS-5146)

[KamilEmeleev]

Summary by CodeRabbit

• Enhancements

  • Improved arrow alignment for popovers and tooltips across compound placements, flipped layouts, and right-to-left languages.
  • Added support for custom arrow boundary offsets and arrow styles that override computed positioning.
  • Arrows now better respect overlay and target boundaries for more consistent placement.

• Documentation

  • Updated the documented default arrow boundary offset to 20.

[coderabbitai]

Warning

Review limit reached

@KamilEmeleev, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 52 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 263a337d-c00e-48e0-8b5b-5e6f266c5023

📥 Commits

Reviewing files that changed from the base of the PR and between d63443b and 832678f.

📒 Files selected for processing (2)

• packages/components/src/components/Popover/Popover.test.tsx
• packages/components/src/components/Tooltip/Tooltip.test.tsx

📝 Walkthrough

Walkthrough

The change adds shared overlay-arrow positioning utilities. Popover and Tooltip use the utilities with locale direction, target references, placement, and boundary offsets. Tests cover geometry, RTL behavior, disabled states, style merging, and component integration.

Changes

Overlay arrow alignment

Layer / File(s)	Summary
Overlay arrow style calculation packages/components/src/hooks/useOverlayArrowStyle/*	Adds getOverlayArrowStyle and useOverlayArrowStyle. The logic evaluates placement, text direction, overlay bounds, target bounds, and boundary offsets before returning positional overrides. Tests cover alignment, RTL behavior, invalid or out-of-bounds offsets, disabled states, measurement, and style merging.
Popover and Tooltip integration packages/components/src/components/Popover/*, packages/components/src/components/Tooltip/*, tools/public_api_guard/components/Tooltip.api.md	Popover and Tooltip pass resolved target references and locale direction to the shared hook. Rendered arrows receive computed styles. Tests cover compound placement, boundary offsets, and explicit style overrides. The documented Popover default changes to 20, and the Tooltip API guard omits the inherited arrowBoundaryOffset key.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant PopoverOrTooltip
  participant useOverlayArrowStyle
  participant DOMGeometry
  participant Arrow
  PopoverOrTooltip->>useOverlayArrowStyle: pass placement, direction, boundary offset, and refs
  useOverlayArrowStyle->>DOMGeometry: measure overlay and target bounds
  DOMGeometry-->>useOverlayArrowStyle: return element rectangles
  useOverlayArrowStyle-->>PopoverOrTooltip: return positional style
  PopoverOrTooltip->>Arrow: render merged arrow style

Loading

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses the main change: correcting arrow alignment for Tooltip and Popover components, which is reflected throughout the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ 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 fix/ds-5146

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Visit the preview URL for this PR (updated for commit 832678f):

https://react-koobiq-next--prs-446-ox254izi.web.app

_{(expires Tue, 11 Aug 2026 10:34:19 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff}

[KamilEmeleev]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[Copilot]

Pull request overview

Fixes Tooltip/Popover arrow alignment for compound placements by introducing a shared hook that conditionally overrides React Aria’s computed arrow position based on overlay/target geometry and locale direction.

Changes:

• Added useOverlayArrowStyle (+ unit tests) to compute a stable left/top override for compound placements (including RTL).
• Integrated the new hook into Tooltip and PopoverInner, and expanded component tests to validate compound-placement alignment and custom offsets.
• Corrected Popover’s documented default arrowBoundaryOffset to 20 and updated the Tooltip public API snapshot accordingly.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
tools/public_api_guard/components/Tooltip.api.md	Updates generated public API snapshot for Tooltip typings.
packages/components/src/hooks/useOverlayArrowStyle/useOverlayArrowStyle.ts	New hook + helper to compute/merge arrow positional overrides.
packages/components/src/hooks/useOverlayArrowStyle/useOverlayArrowStyle.test.ts	Unit coverage for placement/flip/RTL/offset behavior and merge semantics.
packages/components/src/hooks/useOverlayArrowStyle/index.ts	Barrel export for the new hook.
packages/components/src/components/Tooltip/Tooltip.tsx	Uses locale direction + new hook to override arrow style when enabled.
packages/components/src/components/Tooltip/Tooltip.test.tsx	Adds integration test ensuring compound placement arrow alignment and custom offsets.
packages/components/src/components/Popover/types.ts	Documentation fix: default arrowBoundaryOffset is 20.
packages/components/src/components/Popover/PopoverInner.tsx	Uses locale direction + new hook; ensures slot arrow style retains highest priority.
packages/components/src/components/Popover/Popover.test.tsx	Adds integration tests for compound placement alignment, custom offsets, and slot style priority.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.