[0.81] Clamp Tooltip Position To Monitor

[Vineeth (vineethkuttan)]

Description

Fixes a P0 bug reported by the Kindle team where React Native Windows tooltips rendered near screen edges (e.g. icons in the top-right corner) get cut off / clipped instead of staying fully visible.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Why

TooltipTracker::ShowTooltip  in  TooltipService.cpp  positioned the native tooltip popup window using only the cursor/anchor point ( pt.x - width/2 ,  pt.y - height - margin ), with no check against screen bounds. Tooltips anchored near a monitor edge could therefore render partially or fully outside the visible screen.

What

Added  ClampTooltipPositionToMonitor() :

• Resolves the monitor nearest the anchor point via  MonitorFromPoint  +  GetMonitorInfo(...).rcWork .
• Flips the tooltip below the anchor when there isn't enough room above (instead of clipping at the top).
• Clamps the final tooltip rect horizontally and vertically so it never extends past the monitor's work area.

 ShowTooltip  now uses this clamped position when creating the tooltip popup window, instead of the raw, unclamped offset.

This matches standard OS tooltip behavior (Win32/WinUI), where tooltips may extend beyond their owner window but are always kept fully within the visible screen.

Screenshots

Before :

After :

Testing

Tested in Playground

Changelog

Should this change be included in the release notes: yes

Clamp Tooltip Position according to the Monitor

Microsoft Reviewers: Open in CodeFlow

[Copilot]

Pull request overview

Clamps Fabric tooltip windows to the nearest monitor’s work area.

Changes:

• Adds monitor-aware tooltip positioning and edge clamping.
• Uses the clamped coordinates when creating tooltip windows.
• Adds a patch changelog entry.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
TooltipService.cpp	Adds monitor-aware tooltip placement.
Change JSON	Records the patch release note.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

Suppressed comments (1)

vnext/Microsoft.ReactNative/Fabric/Composition/TooltipService.cpp:161

• Capping these fields only shrinks the popup HWND; the IDWriteTextLayout was already created with the original constraints and WM_PAINT still renders that unchanged layout. Whenever either cap is hit, text outside the reduced client rect is therefore clipped, so an oversized tooltip is not actually fully visible. Resolve the monitor limits before creating the text layout (accounting for padding and scale), or recreate/update the layout with the capped content size and an explicit overflow/trimming policy before deriving the final window dimensions.

  tooltipWidth = std::min(tooltipWidth, static_cast<int>(bounds.right - bounds.left));
  tooltipHeight = std::min(tooltipHeight, static_cast<int>(bounds.bottom - bounds.top));

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

Suppressed comments (1)

vnext/Microsoft.ReactNative/Fabric/Composition/TooltipService.cpp:153

• Capping only these window dimensions does not resize the already-created IDWriteTextLayout. If the measured tooltip exceeds the work area, CreateWindow gets the reduced size while RenderText still draws the original larger layout, so text is clipped (and any existing ellipsis can remain outside the client area). Please apply the monitor-derived bounds to the layout constraints before creating/measuring the text layout, then clamp using those resulting dimensions.

  // Cap the tooltip size to the work area so the position clamping below is guaranteed to keep
  // the whole tooltip on-screen, even for unusually long tooltip text.
  tooltipWidth = std::min(tooltipWidth, static_cast<int>(bounds.right - bounds.left));
  tooltipHeight = std::min(tooltipHeight, static_cast<int>(bounds.bottom - bounds.top));

[Abhijeet Jha (iamAbhi-916)]

LGTM

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.

Suppressed comments (1)

vnext/Microsoft.ReactNative/Fabric/Composition/TooltipService.cpp:153

• Capping only the window dimensions does not resize or reflow the already-created IDWriteTextLayout. If a tooltip is taller or wider than the work area (for example, long text with high DPI/text scaling), RenderText still draws the original layout into this smaller client rect, so its content is clipped. Please constrain/recreate the text layout using the selected monitor's available size (minus padding) before measuring and creating the window, or define another explicit overflow treatment such as ellipsis.

  // Cap the tooltip size to the work area so the position clamping below is guaranteed to keep
  // the whole tooltip on-screen, even for unusually long tooltip text.
  tooltipWidth = std::min(tooltipWidth, static_cast<int>(bounds.right - bounds.left));
  tooltipHeight = std::min(tooltipHeight, static_cast<int>(bounds.bottom - bounds.top));