react-native-windows 0.74.20 → 0.74.22

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp

@@ -23,10 +23,11 @@ void WindowsTextInputShadowNode::setContextContainer(ContextContainer *contextCo
   m_contextContainer = contextContainer;
 }
 
-AttributedString WindowsTextInputShadowNode::getAttributedString() const {
+AttributedString WindowsTextInputShadowNode::getAttributedString(const LayoutContext &layoutContext) const {
   // Use BaseTextShadowNode to get attributed string from children
 
   auto childTextAttributes = TextAttributes::defaultTextAttributes();
+  childTextAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
 
   childTextAttributes.apply(getConcreteProps().textAttributes);
 
@@ -38,6 +39,7 @@ AttributedString WindowsTextInputShadowNode::getAttributedString() const {
   // value attributes manually.
   if (!getConcreteProps().text.empty()) {
     auto textAttributes = TextAttributes::defaultTextAttributes();
+    textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
     textAttributes.apply(getConcreteProps().textAttributes);
     auto fragment = AttributedString::Fragment{};
     fragment.string = getConcreteProps().text;
@@ -59,7 +61,7 @@ AttributedString WindowsTextInputShadowNode::getAttributedString() const {
 // display at all.
 // TODO T67606511: We will redefine the measurement of empty strings as part
 // of T67606511
-AttributedString WindowsTextInputShadowNode::getPlaceholderAttributedString() const {
+AttributedString WindowsTextInputShadowNode::getPlaceholderAttributedString(const LayoutContext &layoutContext) const {
   // Return placeholder text, since text and children are empty.
   auto textAttributedString = AttributedString{};
   auto fragment = AttributedString::Fragment{};
@@ -70,6 +72,7 @@ AttributedString WindowsTextInputShadowNode::getPlaceholderAttributedString() co
   }
 
   auto textAttributes = TextAttributes::defaultTextAttributes();
+  textAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
   textAttributes.apply(getConcreteProps().textAttributes);
 
   // If there's no text, it's possible that this Fragment isn't actually
@@ -86,10 +89,10 @@ void WindowsTextInputShadowNode::setTextLayoutManager(SharedTextLayoutManager te
   m_textLayoutManager = std::move(textLayoutManager);
 }
 
-AttributedString WindowsTextInputShadowNode::getMostRecentAttributedString() const {
+AttributedString WindowsTextInputShadowNode::getMostRecentAttributedString(const LayoutContext &layoutContext) const {
   const auto &state = getStateData();
 
-  auto reactTreeAttributedString = getAttributedString();
+  auto reactTreeAttributedString = getAttributedString(layoutContext);
 
   // Sometimes the treeAttributedString will only differ from the state
   // not by inherent properties (string or prop attributes), but by the frame of
@@ -101,10 +104,10 @@ AttributedString WindowsTextInputShadowNode::getMostRecentAttributedString() con
   return (!treeAttributedStringChanged ? state.attributedString : reactTreeAttributedString);
 }
 
-void WindowsTextInputShadowNode::updateStateIfNeeded() {
+void WindowsTextInputShadowNode::updateStateIfNeeded(const LayoutContext &layoutContext) {
   ensureUnsealed();
 
-  auto reactTreeAttributedString = getAttributedString();
+  auto reactTreeAttributedString = getAttributedString(layoutContext);
   const auto &state = getStateData();
 
   // Tree is often out of sync with the value of the TextInput.
@@ -125,13 +128,13 @@ void WindowsTextInputShadowNode::updateStateIfNeeded() {
   // in the AttributedString, and when State is updated, it needs some way to
   // reconstruct a Fragment with default TextAttributes.
   auto defaultTextAttributes = TextAttributes::defaultTextAttributes();
-
+  defaultTextAttributes.fontSizeMultiplier = layoutContext.fontSizeMultiplier;
   defaultTextAttributes.apply(getConcreteProps().textAttributes);
 
   auto newEventCount = state.reactTreeAttributedString.isContentEqual(reactTreeAttributedString)
       ? 0
       : getConcreteProps().mostRecentEventCount;
-  auto newAttributedString = getMostRecentAttributedString();
+  auto newAttributedString = getMostRecentAttributedString(layoutContext);
 
   // Even if we're here and updating state, it may be only to update the layout
   // manager If that is the case, make sure we don't update text: pass in the
@@ -168,10 +171,10 @@ Size WindowsTextInputShadowNode::measureContent(
   // during layout, but not during `measure`. If State is out-of-date in layout,
   // it's too late: measure will have already operated on old State. Thus, we
   // use the same value here that we *will* use in layout to update the state.
-  AttributedString attributedString = getMostRecentAttributedString();
+  AttributedString attributedString = getMostRecentAttributedString(layoutContext);
 
   if (attributedString.isEmpty()) {
-    attributedString = getPlaceholderAttributedString();
+    attributedString = getPlaceholderAttributedString(layoutContext);
   }
 
   if (attributedString.isEmpty() && getStateData().mostRecentEventCount != 0) {
@@ -191,7 +194,7 @@ Size WindowsTextInputShadowNode::measureContent(
 }
 
 void WindowsTextInputShadowNode::layout(LayoutContext layoutContext) {
-  updateStateIfNeeded();
+  updateStateIfNeeded(layoutContext);
   ConcreteViewShadowNode::layout(layoutContext);
 }
 

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.h

@@ -41,8 +41,8 @@ class WindowsTextInputShadowNode final : public ConcreteViewShadowNode<
   /*
    * Returns a `AttributedString` which represents text content of the node.
    */
-  AttributedString getAttributedString() const;
-  AttributedString getPlaceholderAttributedString() const;
+  AttributedString getAttributedString(const LayoutContext &layoutContext) const;
+  AttributedString getPlaceholderAttributedString(const LayoutContext &layoutContext) const;
 
   /*
    * Associates a shared TextLayoutManager with the node.
@@ -62,13 +62,13 @@ class WindowsTextInputShadowNode final : public ConcreteViewShadowNode<
   /**
    * Get the most up-to-date attributed string for measurement and State.
    */
-  AttributedString getMostRecentAttributedString() const;
+  AttributedString getMostRecentAttributedString(const LayoutContext &layoutContext) const;
 
   /*
    * Creates a `State` object (with `AttributedText` and
    * `TextLayoutManager`) if needed.
    */
-  void updateStateIfNeeded();
+  void updateStateIfNeeded(const LayoutContext &layoutContext);
 
   SharedTextLayoutManager m_textLayoutManager;
 

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputState.cpp

@@ -31,17 +31,4 @@ WindowsTextInputState::WindowsTextInputState(
       defaultThemePaddingTop(defaultThemePaddingTop),
       defaultThemePaddingBottom(defaultThemePaddingBottom) {}
 
-WindowsTextInputState::WindowsTextInputState(const WindowsTextInputState &previousState, const folly::dynamic &data)
-    : mostRecentEventCount(data.getDefault("mostRecentEventCount", previousState.mostRecentEventCount).getInt()),
-      cachedAttributedStringId(data.getDefault("opaqueCacheId", previousState.cachedAttributedStringId).getInt()),
-      attributedString(previousState.attributedString),
-      reactTreeAttributedString(previousState.reactTreeAttributedString),
-      paragraphAttributes(previousState.paragraphAttributes),
-      defaultThemePaddingStart(
-          data.getDefault("themePaddingStart", previousState.defaultThemePaddingStart).getDouble()),
-      defaultThemePaddingEnd(data.getDefault("themePaddingEnd", previousState.defaultThemePaddingEnd).getDouble()),
-      defaultThemePaddingTop(data.getDefault("themePaddingTop", previousState.defaultThemePaddingTop).getDouble()),
-      defaultThemePaddingBottom(
-          data.getDefault("themePaddingBottom", previousState.defaultThemePaddingBottom).getDouble()){};
-
 } // namespace facebook::react

package/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputState.h

@@ -66,9 +66,6 @@ class WindowsTextInputState final {
       double defaultThemePaddingBottom);
 
   WindowsTextInputState() = default;
-  WindowsTextInputState(const WindowsTextInputState &previousState, const folly::dynamic &data);
-  folly::dynamic getDynamic() const;
-  MapBuffer getMapBuffer() const;
 };
 
 } // namespace facebook::react

package/Microsoft.ReactNative/Fabric/Composition/Theme.cpp

@@ -296,7 +296,9 @@ bool Theme::TryGetPlatformColor(const std::string &platformColor, winrt::Windows
           {"ScrollBarThumbFillDisabled", "ControlStrongFillColorDisabled"},
           {"ScrollBarTrackFill",
            "AcrylicInAppFillColorDefault"}, // TODO make AcrylicInAppFillColorDefault a real acrylic brush
-      };
+          {"ToolTipBackground", "SystemChromeMediumLowColor"},
+          {"ToolTipForeground", "SystemControlForegroundBaseHighColor"},
+          {"ToolTipBorderBrush", "SystemControlTransientBorderColor"}};
 
   static std::unordered_map<std::string, winrt::Windows::UI::Color, std::hash<std::string_view>, std::equal_to<>>
       s_lightColors = {
@@ -326,7 +328,9 @@ bool Theme::TryGetPlatformColor(const std::string &platformColor, winrt::Windows
           {"ControlStrongFillColorDefault", {0x72, 0x00, 0x00, 0x00}},
           {"ControlStrongFillColorDisabled", {0x51, 0x00, 0x00, 0x00}},
           {"AcrylicInAppFillColorDefault", {0x9E, 0xFF, 0xFF, 0xFF}},
-      };
+          {"SystemChromeMediumLowColor", {0xFF, 0xF2, 0xF2, 0xF2}},
+          {"SystemControlForegroundBaseHighColor", {0xFF, 0x00, 0x00, 0x00}},
+          {"SystemControlTransientBorderColor", {0x24, 0x00, 0x00, 0x00}}};
 
   static std::unordered_map<std::string, winrt::Windows::UI::Color, std::hash<std::string_view>, std::equal_to<>>
       s_darkColors = {
@@ -356,7 +360,9 @@ bool Theme::TryGetPlatformColor(const std::string &platformColor, winrt::Windows
           {"ControlStrongFillColorDefault", {0x8B, 0xFF, 0xFF, 0xFF}},
           {"ControlStrongFillColorDisabled", {0x3F, 0xFF, 0xFF, 0xFF}},
           {"AcrylicInAppFillColorDefault", {0x9E, 0x00, 0x00, 0x00}},
-      };
+          {"SystemChromeMediumLowColor", {0xFF, 0x2B, 0x2B, 0x2B}},
+          {"SystemControlForegroundBaseHighColor", {0xFF, 0xFF, 0xFF, 0xFF}},
+          {"SystemControlTransientBorderColor", {0x5C, 0x00, 0x00, 0x00}}};
 
   static std::unordered_map<
       std::string,
@@ -391,7 +397,9 @@ bool Theme::TryGetPlatformColor(const std::string &platformColor, winrt::Windows
           {"SubtleFillColorSecondary", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonFace, {}}},
           {"ControlStrongFillColorDefault", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonFace, {}}},
           {"ControlStrongFillColorDisabled", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonFace, {}}},
-      };
+          {"SystemChromeMediumLowColor", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonFace, {}}},
+          {"SystemControlForegroundBaseHighColor", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonText, {}}},
+          {"SystemControlTransientBorderColor", {winrt::Windows::UI::ViewManagement::UIElementType::ButtonText, {}}}};
 
   auto alias = s_xamlAliasedColors.find(platformColor);
   if (alias != s_xamlAliasedColors.end()) {

package/Microsoft.ReactNative/Fabric/Composition/TooltipService.cpp

@@ -0,0 +1,338 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "TooltipService.h"
+
+#include <CompositionSwitcher.Experimental.interop.h>
+#include <Fabric/Composition/CompositionViewComponentView.h>
+#include <react/renderer/attributedstring/AttributedStringBox.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/textlayoutmanager/TextLayoutManager.h>
+#include <winrt/Microsoft.ReactNative.Composition.h>
+#include "TextDrawing.h"
+#include "dwmapi.h"
+
+namespace winrt::Microsoft::ReactNative {
+
+constexpr PCWSTR c_tooltipWindowClassName = L"RN_TOOLTIP";
+constexpr auto TooltipDataProperty = L"TooltipData";
+constexpr float tooltipFontSize = 12;
+constexpr float tooltipMaxHeight = 1000;
+constexpr float tooltipMaxWidth = 320;
+constexpr float tooltipHorizontalPadding = 8;
+constexpr float tooltipTopPadding = 5;
+constexpr float tooltipBottomPadding = 7;
+constexpr float toolTipBorderThickness = 1;
+constexpr int toolTipPlacementMargin = 12;
+constexpr int toolTipAnimationTimeMs = 200;
+constexpr int toolTipTimeToShowMs = 1000;
+
+struct TooltipData {
+  TooltipData(const winrt::Microsoft::ReactNative::ComponentView &view) : view(view) {}
+
+  static TooltipData *GetFromWindow(HWND hwnd) {
+    auto data = reinterpret_cast<TooltipData *>(GetProp(hwnd, TooltipDataProperty));
+    return data;
+  }
+
+  int width;
+  int height;
+  ::Microsoft::ReactNative::ReactTaggedView view;
+  winrt::com_ptr<::IDWriteTextLayout> textLayout;
+  facebook::react::AttributedStringBox attributedString;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext compositionContext;
+};
+
+facebook::react::AttributedStringBox CreateTooltipAttributedString(const std::string &tooltip) noexcept {
+  auto attributedString = facebook::react::AttributedString{};
+  auto fragment = facebook::react::AttributedString::Fragment{};
+  fragment.string = tooltip;
+  fragment.textAttributes.fontSize = tooltipFontSize;
+  attributedString.appendFragment(fragment);
+  return facebook::react::AttributedStringBox{attributedString};
+}
+
+LRESULT CALLBACK TooltipWndProc(HWND hwnd, UINT message, WPARAM wparam, LPARAM lparam) noexcept {
+  switch (message) {
+    case WM_DESTROY: {
+      delete TooltipData::GetFromWindow(hwnd);
+      SetProp(hwnd, TooltipDataProperty, 0);
+      return 0;
+    }
+    case WM_PRINTCLIENT:
+    case WM_PAINT: {
+      HDC hdc;
+      PAINTSTRUCT ps;
+
+      if (message != WM_PRINTCLIENT)
+        hdc = BeginPaint(hwnd, &ps);
+      else
+        hdc = (HDC)wparam;
+      auto data = TooltipData::GetFromWindow(hwnd);
+
+      if (auto view = data->view.view()) {
+        auto scaleFactor = view.LayoutMetrics().PointScaleFactor;
+
+        auto ccInterop = data->compositionContext
+                             .as<::Microsoft::ReactNative::Composition::Experimental::ICompositionContextInterop>();
+        winrt::com_ptr<ID2D1Factory1> factory;
+        ccInterop->D2DFactory(factory.put());
+
+        winrt::com_ptr<ID2D1DCRenderTarget> renderTarget;
+
+        D2D1_RENDER_TARGET_PROPERTIES props = D2D1::RenderTargetProperties(
+            D2D1_RENDER_TARGET_TYPE_DEFAULT,
+            D2D1::PixelFormat(DXGI_FORMAT_B8G8R8A8_UNORM, D2D1_ALPHA_MODE_IGNORE),
+            0,
+            0,
+            D2D1_RENDER_TARGET_USAGE_NONE,
+            D2D1_FEATURE_LEVEL_DEFAULT);
+        winrt::check_hresult(factory->CreateDCRenderTarget(&props, renderTarget.put()));
+        RECT rc;
+        GetClientRect(hwnd, &rc);
+        winrt::check_hresult(renderTarget->BindDC(hdc, &rc));
+        auto theme = view.as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Theme();
+        auto selfTheme = winrt::get_self<winrt::Microsoft::ReactNative::Composition::implementation::Theme>(theme);
+
+        renderTarget->BeginDraw();
+        renderTarget->Clear(selfTheme->D2DPlatformColor("ToolTipBackground"));
+
+        auto textAttributes = facebook::react::TextAttributes{};
+        facebook::react::Color fgColor;
+        fgColor.m_platformColor.push_back("ToolTipForeground");
+        textAttributes.foregroundColor = fgColor;
+
+        winrt::Microsoft::ReactNative::Composition::RenderText(
+            *renderTarget,
+            *data->textLayout,
+            data->attributedString.getValue(),
+            textAttributes,
+            {std::round(tooltipHorizontalPadding * scaleFactor), std::round(tooltipTopPadding * scaleFactor)},
+            scaleFactor,
+            *selfTheme);
+
+        auto hr = renderTarget->EndDraw();
+      }
+
+      if (message != WM_PRINTCLIENT)
+        EndPaint(hwnd, &ps);
+      return 0;
+    }
+    case WM_NCCREATE: {
+      auto cs = reinterpret_cast<CREATESTRUCT *>(lparam);
+      auto data = static_cast<TooltipData *>(cs->lpCreateParams);
+      WINRT_ASSERT(data);
+      SetProp(hwnd, TooltipDataProperty, reinterpret_cast<HANDLE>(data));
+      break;
+    }
+  }
+
+  return DefWindowProc(hwnd, message, wparam, lparam);
+}
+
+void RegisterTooltipWndClass() noexcept {
+  static bool registered = false;
+  if (registered) {
+    return;
+  }
+
+  HINSTANCE hInstance =
+      GetModuleHandle(NULL); // returns a handle to the file used to create the calling process (.exe file)
+
+  WNDCLASSEX wcex = {}; // contains window class information
+  wcex.cbSize = sizeof(wcex); // size of windows class (bytes)
+  wcex.style = CS_HREDRAW | CS_VREDRAW; // class style (redraw window on size adjustment)
+  wcex.lpfnWndProc = &TooltipWndProc; // pointer to windows procedure
+  wcex.cbClsExtra = DLGWINDOWEXTRA; // extra bytes to allocate
+  wcex.cbWndExtra = sizeof(TooltipData *); // extra bytes to allocate
+  wcex.hInstance = hInstance;
+  wcex.hCursor = LoadCursor(nullptr, IDC_ARROW); // handle to class cursor
+  wcex.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1); // background color
+  wcex.lpszClassName = c_tooltipWindowClassName; // specify resource name
+  ATOM classId = RegisterClassEx(&wcex); // register new windows class
+  WINRT_VERIFY(classId); // 0 = fail
+  winrt::check_win32(!classId);
+
+  registered = true;
+}
+
+TooltipTracker::TooltipTracker(
+    const winrt::Microsoft::ReactNative::ComponentView &view,
+    const winrt::Microsoft::ReactNative::ReactPropertyBag &properties,
+    TooltipService *outer)
+    : m_view(view), m_properties(properties), m_outer(outer) {
+  view.PointerEntered({this, &TooltipTracker::OnPointerEntered});
+  view.PointerExited({this, &TooltipTracker::OnPointerExited});
+  view.PointerMoved({this, &TooltipTracker::OnPointerMoved});
+  view.Unmounted({this, &TooltipTracker::OnUnmounted});
+}
+
+TooltipTracker::~TooltipTracker() {
+  DestroyTimer();
+  DestroyTooltip();
+}
+
+facebook::react::Tag TooltipTracker::Tag() const noexcept {
+  return m_view.Tag();
+}
+
+void TooltipTracker::OnPointerEntered(
+    const winrt::Windows::Foundation::IInspectable &sender,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (args.Pointer().PointerDeviceType() !=
+          winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse &&
+      args.Pointer().PointerDeviceType() != winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Pen)
+    return;
+
+  auto pp = args.GetCurrentPoint(-1);
+  m_pos = pp.Position();
+
+  m_timer = winrt::Microsoft::ReactNative::Timer::Create(m_properties.Handle());
+  m_timer.Interval(std::chrono::milliseconds(toolTipTimeToShowMs));
+  m_timer.Tick({this, &TooltipTracker::OnTick});
+  m_timer.Start();
+}
+
+void TooltipTracker::OnPointerMoved(
+    const winrt::Windows::Foundation::IInspectable &sender,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (args.Pointer().PointerDeviceType() !=
+          winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse &&
+      args.Pointer().PointerDeviceType() != winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Pen)
+    return;
+
+  auto pp = args.GetCurrentPoint(-1);
+  m_pos = pp.Position();
+}
+
+void TooltipTracker::OnTick(
+    const winrt::Windows::Foundation::IInspectable &,
+    const winrt::Windows::Foundation::IInspectable &) noexcept {
+  ShowTooltip(m_view.view());
+}
+
+void TooltipTracker::OnPointerExited(
+    const winrt::Windows::Foundation::IInspectable &sender,
+    const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept {
+  if (args.Pointer().PointerDeviceType() !=
+          winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Mouse &&
+      args.Pointer().PointerDeviceType() != winrt::Microsoft::ReactNative::Composition::Input::PointerDeviceType::Pen)
+    return;
+  DestroyTimer();
+  DestroyTooltip();
+}
+
+void TooltipTracker::OnUnmounted(
+    const winrt::Windows::Foundation::IInspectable &,
+    const winrt::Microsoft::ReactNative::ComponentView &) noexcept {
+  DestroyTimer();
+  DestroyTooltip();
+}
+
+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 tooltipData = std::make_unique<TooltipData>(view);
+    tooltipData->attributedString = CreateTooltipAttributedString(*selfView->viewProps()->tooltip);
+
+    tooltipData->compositionContext = selfView->CompositionContext();
+    tooltipData->view = view;
+
+    auto scaleFactor = view.LayoutMetrics().PointScaleFactor;
+    facebook::react::LayoutConstraints layoutConstraints;
+    layoutConstraints.layoutDirection = facebook::react::LayoutDirection::Undefined;
+    layoutConstraints.maximumSize.height = tooltipMaxHeight * scaleFactor;
+    layoutConstraints.maximumSize.width = tooltipMaxWidth * scaleFactor;
+    layoutConstraints.minimumSize.height = 0;
+    layoutConstraints.minimumSize.width = 0;
+
+    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);
+  }
+}
+
+void TooltipTracker::DestroyTooltip() noexcept {
+  if (m_hwndTip) {
+    AnimateWindow(m_hwndTip, toolTipAnimationTimeMs, AW_BLEND | AW_HIDE);
+    DestroyWindow(m_hwndTip);
+    m_hwndTip = nullptr;
+  }
+}
+
+void TooltipTracker::DestroyTimer() noexcept {
+  if (m_timer) {
+    m_timer.Stop();
+    m_timer = nullptr;
+  }
+}
+
+TooltipService::TooltipService(const winrt::Microsoft::ReactNative::ReactPropertyBag &properties)
+    : m_properties(properties) {}
+
+void TooltipService::StartTracking(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+  m_trackers.push_back(std::make_shared<TooltipTracker>(view, m_properties, this));
+}
+
+void TooltipService::StopTracking(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+  for (auto it = m_trackers.begin(); it != m_trackers.end();) {
+    if ((*it)->Tag() == view.Tag())
+      it = m_trackers.erase(it);
+    else
+      ++it;
+  }
+}
+
+static const ReactPropertyId<winrt::Microsoft::ReactNative::ReactNonAbiValue<std::shared_ptr<TooltipService>>>
+    &TooltipServicePropertyId() noexcept {
+  static const ReactPropertyId<winrt::Microsoft::ReactNative::ReactNonAbiValue<std::shared_ptr<TooltipService>>> prop{
+      L"ReactNative", L"TooltipService"};
+  return prop;
+}
+
+std::shared_ptr<TooltipService> TooltipService::GetCurrent(
+    const winrt::Microsoft::ReactNative::ReactPropertyBag &properties) noexcept {
+  return *properties.GetOrCreate(TooltipServicePropertyId(), [properties]() -> std::shared_ptr<TooltipService> {
+    return std::make_shared<TooltipService>(properties);
+  });
+}
+
+} // namespace winrt::Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/Composition/TooltipService.h

@@ -0,0 +1,66 @@
+
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include <Fabric/ReactTaggedView.h>
+#include <winrt/Microsoft.ReactNative.h>
+
+namespace winrt::Microsoft::ReactNative {
+
+struct TooltipService;
+
+struct TooltipTracker {
+  TooltipTracker(
+      const winrt::Microsoft::ReactNative::ComponentView &view,
+      const winrt::Microsoft::ReactNative::ReactPropertyBag &properties,
+      TooltipService *outer);
+  ~TooltipTracker();
+
+  void OnPointerEntered(
+      const winrt::Windows::Foundation::IInspectable &sender,
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept;
+  void OnPointerMoved(
+      const winrt::Windows::Foundation::IInspectable &sender,
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept;
+  void OnPointerExited(
+      const winrt::Windows::Foundation::IInspectable &sender,
+      const winrt::Microsoft::ReactNative::Composition::Input::PointerRoutedEventArgs &args) noexcept;
+  void OnTick(
+      const winrt::Windows::Foundation::IInspectable &,
+      const winrt::Windows::Foundation::IInspectable &) noexcept;
+  void OnUnmounted(
+      const winrt::Windows::Foundation::IInspectable &,
+      const winrt::Microsoft::ReactNative::ComponentView &) noexcept;
+
+  facebook::react::Tag Tag() const noexcept;
+
+ private:
+  void ShowTooltip(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept;
+  void DestroyTimer() noexcept;
+  void DestroyTooltip() noexcept;
+
+  TooltipService *m_outer;
+  winrt::Windows::Foundation::Point m_pos;
+  ::Microsoft::ReactNative::ReactTaggedView m_view;
+  winrt::Microsoft::ReactNative::ITimer m_timer;
+  HWND m_hwndTip{nullptr};
+  winrt::Microsoft::ReactNative::ReactPropertyBag m_properties;
+};
+
+struct TooltipService {
+  TooltipService(const winrt::Microsoft::ReactNative::ReactPropertyBag &properties);
+  void StartTracking(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept;
+  void StopTracking(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept;
+
+  static std::shared_ptr<TooltipService> GetCurrent(
+      const winrt::Microsoft::ReactNative::ReactPropertyBag &properties) noexcept;
+
+ private:
+  std::vector<std::shared_ptr<TooltipTracker>> m_enteredTrackers;
+  std::vector<std::shared_ptr<TooltipTracker>> m_trackers;
+  winrt::Microsoft::ReactNative::ReactPropertyBag m_properties;
+};
+
+} // namespace winrt::Microsoft::ReactNative