Fix tooltips in high dpi (#14397)

acoates-ms · web-flow · commit 222e66d138b8 · 2025-03-06T15:08:19.000-08:00
* Fix tooltips in high dpi

* Change files

* format

* tooltips dont respect textscalefactor
diff --git a/change/react-native-windows-53667472-816f-4d36-b9f3-70b761dd1cf3.json b/change/react-native-windows-53667472-816f-4d36-b9f3-70b761dd1cf3.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix tooltips in high dpi",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
@@ -183,7 +183,7 @@ void ComponentView::updateProps(
     updateShadowProps(oldViewProps, newViewProps);
   }
   if (oldViewProps.tooltip != newViewProps.tooltip) {
-    if (!m_tooltipTracked && newViewProps.tooltip) {
+    if (!m_tooltipTracked && newViewProps.tooltip && !newViewProps.tooltip->empty()) {
       TooltipService::GetCurrent(m_reactContext.Properties())->StartTracking(*this);
       m_tooltipTracked = true;
     } else if (m_tooltipTracked && !newViewProps.tooltip) {
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TooltipService.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TooltipService.cpp
@@ -10,6 +10,7 @@
 #include <react/renderer/core/LayoutConstraints.h>
 #include <react/renderer/textlayoutmanager/TextLayoutManager.h>
 #include <winrt/Microsoft.ReactNative.Composition.h>
+#include <winrt/Windows.UI.ViewManagement.h>
 #include "TextDrawing.h"
 #include "dwmapi.h"
 
@@ -49,6 +50,8 @@ facebook::react::AttributedStringBox CreateTooltipAttributedString(const std::st
   auto fragment = facebook::react::AttributedString::Fragment{};
   fragment.string = tooltip;
   fragment.textAttributes.fontSize = tooltipFontSize;
+  fragment.textAttributes.fontSizeMultiplier =
+      static_cast<float>(winrt::Windows::UI::ViewManagement::UISettings().TextScaleFactor());
   attributedString.appendFragment(std::move(fragment));
   return facebook::react::AttributedStringBox{attributedString};
 }
@@ -231,14 +234,13 @@ void TooltipTracker::OnUnmounted(
 }
 
 void TooltipTracker::ShowTooltip(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
-  auto viewCompView = view.as<winrt::Microsoft::ReactNative::Composition::ViewComponentView>();
-
-  auto selfView =
-      winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::ViewComponentView>(viewCompView);
-  auto parentHwnd = selfView->GetHwndForParenting();
   DestroyTimer();
 
   if (!m_hwndTip) {
+    auto viewCompView = view.as<winrt::Microsoft::ReactNative::Composition::ViewComponentView>();
+    auto selfView =
+        winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::ViewComponentView>(viewCompView);
+    auto parentHwnd = selfView->GetHwndForParenting();
     auto tooltipData = std::make_unique<TooltipData>(view);
     tooltipData->attributedString = CreateTooltipAttributedString(*selfView->viewProps()->tooltip);
 
@@ -256,37 +258,39 @@ void TooltipTracker::ShowTooltip(const winrt::Microsoft::ReactNative::ComponentV
     facebook::react::TextLayoutManager::GetTextLayout(
         tooltipData->attributedString, {} /*paragraphAttributes*/, layoutConstraints, tooltipData->textLayout);
 
-    DWRITE_TEXT_METRICS tm;
-    winrt::check_hresult(tooltipData->textLayout->GetMetrics(&tm));
-
-    tooltipData->width =
-        static_cast<int>(tm.width + ((tooltipHorizontalPadding + tooltipHorizontalPadding) * scaleFactor));
-    tooltipData->height = static_cast<int>(tm.height + ((tooltipTopPadding + tooltipBottomPadding) * scaleFactor));
-
-    POINT pt = {static_cast<LONG>(m_pos.X), static_cast<LONG>(m_pos.Y)};
-    ClientToScreen(parentHwnd, &pt);
-
-    RegisterTooltipWndClass();
-    HINSTANCE hInstance = GetModuleHandle(NULL);
-    m_hwndTip = CreateWindow(
-        c_tooltipWindowClassName,
-        L"Tooltip",
-        WS_POPUP,
-        pt.x - tooltipData->width / 2,
-        static_cast<int>(pt.y - tooltipData->height - (toolTipPlacementMargin * scaleFactor)),
-        tooltipData->width,
-        tooltipData->height,
-        parentHwnd,
-        NULL,
-        hInstance,
-        tooltipData.get());
-
-    DWM_WINDOW_CORNER_PREFERENCE preference = DWMWCP_ROUNDSMALL;
-    UINT borderThickness = 0;
-    DwmSetWindowAttribute(m_hwndTip, DWMWA_WINDOW_CORNER_PREFERENCE, &preference, sizeof(preference));
-
-    tooltipData.release();
-    AnimateWindow(m_hwndTip, toolTipAnimationTimeMs, AW_BLEND);
+    if (tooltipData->textLayout) {
+      DWRITE_TEXT_METRICS tm;
+      winrt::check_hresult(tooltipData->textLayout->GetMetrics(&tm));
+
+      tooltipData->width =
+          static_cast<int>((tm.width + tooltipHorizontalPadding + tooltipHorizontalPadding) * scaleFactor);
+      tooltipData->height = static_cast<int>((tm.height + tooltipTopPadding + tooltipBottomPadding) * scaleFactor);
+
+      POINT pt = {static_cast<LONG>(m_pos.X), static_cast<LONG>(m_pos.Y)};
+      ClientToScreen(parentHwnd, &pt);
+
+      RegisterTooltipWndClass();
+      HINSTANCE hInstance = GetModuleHandle(NULL);
+      m_hwndTip = CreateWindow(
+          c_tooltipWindowClassName,
+          L"Tooltip",
+          WS_POPUP,
+          pt.x - tooltipData->width / 2,
+          static_cast<int>(pt.y - tooltipData->height - (toolTipPlacementMargin * scaleFactor)),
+          tooltipData->width,
+          tooltipData->height,
+          parentHwnd,
+          NULL,
+          hInstance,
+          tooltipData.get());
+
+      DWM_WINDOW_CORNER_PREFERENCE preference = DWMWCP_ROUNDSMALL;
+      UINT borderThickness = 0;
+      DwmSetWindowAttribute(m_hwndTip, DWMWA_WINDOW_CORNER_PREFERENCE, &preference, sizeof(preference));
+
+      tooltipData.release();
+      AnimateWindow(m_hwndTip, toolTipAnimationTimeMs, AW_BLEND);
+    }
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -183,7 +183,7 @@ void ComponentView::updateProps(`
`183`	`183`	`updateShadowProps(oldViewProps, newViewProps);`
`184`	`184`	`}`
`185`	`185`	`if (oldViewProps.tooltip != newViewProps.tooltip) {`
`186`		`- if (!m_tooltipTracked && newViewProps.tooltip) {`
	`186`	`+ if (!m_tooltipTracked && newViewProps.tooltip && !newViewProps.tooltip->empty()) {`
`187`	`187`	`TooltipService::GetCurrent(m_reactContext.Properties())->StartTracking(*this);`
`188`	`188`	`m_tooltipTracked = true;`
`189`	`189`	`} else if (m_tooltipTracked && !newViewProps.tooltip) {`