[Fabric] implement tooltip property (#13941)

* [Fabric] implement view tooltip property

* format

* Change files

* update

* Fix lingering tooltip if component is unmounted while tooltip showing

* snapshot

---------

Co-authored-by: Jon Thysell <jthysell@microsoft.com>

Author: acoates-ms

change/react-native-windows-4cf47ab7-542b-4ccb-bc2e-46c79be1bb02.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] implement view tooltip property",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/e2e-test-app-fabric/test/__snapshots__/ViewComponentTest.test.ts.snap

@@ -6085,12 +6085,24 @@ exports[`View Tests Views can have tooltips 1`] = `
         "_Props": {},
       },
       {
-        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
         "_Props": {},
+        "__Children": [
+          {
+            "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+            "_Props": {},
+          },
+        ],
       },
       {
-        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
         "_Props": {},
+        "__Children": [
+          {
+            "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+            "_Props": {},
+          },
+        ],
       },
     ],
   },
@@ -6126,6 +6138,25 @@ exports[`View Tests Views can have tooltips 1`] = `
             "Offset": "0, 0, 0",
             "Size": "916, 15",
             "Visual Type": "SpriteVisual",
+            "__Children": [
+              {
+                "Offset": "0, 0, 0",
+                "Size": "916, 15",
+                "Visual Type": "SpriteVisual",
+                "__Children": [
+                  {
+                    "Offset": "0, 0, 0",
+                    "Size": "916, 15",
+                    "Visual Type": "SpriteVisual",
+                  },
+                  {
+                    "Offset": "0, 0, 0",
+                    "Size": "0, 0",
+                    "Visual Type": "SpriteVisual",
+                  },
+                ],
+              },
+            ],
           },
           {
             "Offset": "0, 0, 0",
@@ -6136,13 +6167,32 @@ exports[`View Tests Views can have tooltips 1`] = `
       },
       {
         "Offset": "0, 29, 0",
-        "Size": "916, 16",
+        "Size": "916, 14",
         "Visual Type": "SpriteVisual",
         "__Children": [
           {
             "Offset": "0, 0, 0",
-            "Size": "916, 16",
+            "Size": "916, 14",
             "Visual Type": "SpriteVisual",
+            "__Children": [
+              {
+                "Offset": "0, 0, 0",
+                "Size": "916, 16",
+                "Visual Type": "SpriteVisual",
+                "__Children": [
+                  {
+                    "Offset": "0, 0, 0",
+                    "Size": "916, 16",
+                    "Visual Type": "SpriteVisual",
+                  },
+                  {
+                    "Offset": "0, 0, 0",
+                    "Size": "0, 0",
+                    "Visual Type": "SpriteVisual",
+                  },
+                ],
+              },
+            ],
           },
           {
             "Offset": "0, 0, 0",

vnext/Desktop.DLL/React.Windows.Desktop.DLL.vcxproj

@@ -103,6 +103,7 @@
         comsuppw.lib;
         Shlwapi.lib;
         Version.lib;
+        Dwmapi.lib;
         WindowsApp_downlevel.lib;
         %(AdditionalDependencies)
       </AdditionalDependencies>

vnext/Microsoft.ReactNative/Fabric/ComponentView.cpp

@@ -14,6 +14,7 @@
 #include <Fabric/Composition/RootComponentView.h>
 #include "AbiEventEmitter.h"
 #include "AbiShadowNode.h"
+#include "ReactCoreInjection.h"
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 struct RootComponentView;
@@ -262,6 +263,17 @@ void ComponentView::HandleCommand(const winrt::Microsoft::ReactNative::HandleCom
   }
 }
 
+HWND ComponentView::GetHwndForParenting() noexcept {
+  if (m_parent) {
+    return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(m_parent)
+        ->GetHwndForParenting();
+  }
+
+  // Fallback if we do not know any more specific HWND
+  return reinterpret_cast<HWND>(winrt::Microsoft::ReactNative::implementation::ReactCoreInjection::GetTopLevelWindowId(
+      m_reactContext.Properties().Handle()));
+}
+
 winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *ComponentView::rootComponentView()
     const noexcept {
   if (m_rootView)

vnext/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -209,6 +209,9 @@ struct ComponentView : public ComponentViewT<ComponentView> {
   // Notify up the tree to bring the rect into view by scrolling as needed
   virtual void StartBringIntoView(BringIntoViewOptions &&args) noexcept;
 
+  // Eventually PopupContentLink and similar APIs will remove the need for this.
+  virtual HWND GetHwndForParenting() noexcept;
+
   virtual const winrt::Microsoft::ReactNative::IComponentProps userProps(
       facebook::react::Props::Shared const &props) noexcept;
 

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp

@@ -23,6 +23,7 @@
 #include "CompositionHelpers.h"
 #include "RootComponentView.h"
 #include "Theme.h"
+#include "TooltipService.h"
 #include "UiaHelpers.h"
 #include "d2d1helper.h"
 
@@ -43,6 +44,13 @@ ComponentView::ComponentView(
   m_outerVisual.InsertAt(m_focusVisual.InnerVisual(), 0);
 }
 
+ComponentView::~ComponentView() {
+  if (m_tooltipTracked) {
+    TooltipService::GetCurrent(m_reactContext.Properties())->StopTracking(*this);
+    m_tooltipTracked = false;
+  }
+}
+
 facebook::react::Tag ComponentView::Tag() const noexcept {
   return m_tag;
 }
@@ -130,6 +138,16 @@ void ComponentView::updateProps(
     updateShadowProps(oldViewProps, newViewProps);
   }
 
+  if (oldViewProps.tooltip != newViewProps.tooltip) {
+    if (!m_tooltipTracked && newViewProps.tooltip) {
+      TooltipService::GetCurrent(m_reactContext.Properties())->StartTracking(*this);
+      m_tooltipTracked = true;
+    } else if (m_tooltipTracked && !newViewProps.tooltip) {
+      TooltipService::GetCurrent(m_reactContext.Properties())->StopTracking(*this);
+      m_tooltipTracked = false;
+    }
+  }
+
   base_type::updateProps(props, oldProps);
 }
 

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h

@@ -30,6 +30,7 @@ struct ComponentView : public ComponentViewT<
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::ReactContext const &reactContext,
       ComponentViewFeatures flags);
+  virtual ~ComponentView();
 
   virtual winrt::Microsoft::ReactNative::Composition::Experimental::IVisual Visual() const noexcept {
     return nullptr;
@@ -151,6 +152,7 @@ struct ComponentView : public ComponentViewT<
       const facebook::react::ViewProps &viewProps) noexcept;
 
   bool m_FinalizeTransform{false};
+  bool m_tooltipTracked{false};
   ComponentViewFeatures m_flags;
   void showFocusVisual(bool show) noexcept;
   winrt::Microsoft::ReactNative::Composition::Experimental::IFocusVisual m_focusVisual{nullptr};

vnext/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.cpp

@@ -332,7 +332,7 @@ winrt::IInspectable ReactNativeIsland::GetUiaProvider() noexcept {
   if (m_uiaProvider == nullptr) {
     m_uiaProvider =
         winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionRootAutomationProvider>(*this);
-    if (m_hwnd) {
+    if (m_hwnd && !m_island) {
       auto pRootProvider =
           static_cast<winrt::Microsoft::ReactNative::implementation::CompositionRootAutomationProvider *>(
               m_uiaProvider.as<IRawElementProviderSimple>().get());
@@ -348,6 +348,10 @@ void ReactNativeIsland::SetWindow(uint64_t hwnd) noexcept {
   m_hwnd = reinterpret_cast<HWND>(hwnd);
 }
 
+HWND ReactNativeIsland::GetHwndForParenting() noexcept {
+  return m_hwnd;
+}
+
 int64_t ReactNativeIsland::SendMessage(uint32_t msg, uint64_t wParam, int64_t lParam) noexcept {
   if (m_rootTag == -1)
     return 0;
@@ -367,7 +371,7 @@ int64_t ReactNativeIsland::SendMessage(uint32_t msg, uint64_t wParam, int64_t lP
 bool ReactNativeIsland::CapturePointer(
     const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer,
     facebook::react::Tag tag) noexcept {
-  if (m_hwnd) {
+  if (m_hwnd && !m_island) {
     SetCapture(m_hwnd);
   }
   return m_CompositionEventHandler->CapturePointer(pointer, tag);
@@ -377,7 +381,7 @@ void ReactNativeIsland::ReleasePointerCapture(
     const winrt::Microsoft::ReactNative::Composition::Input::Pointer &pointer,
     facebook::react::Tag tag) noexcept {
   if (m_CompositionEventHandler->ReleasePointerCapture(pointer, tag)) {
-    if (m_hwnd) {
+    if (m_hwnd && !m_island) {
       if (m_hwnd == GetCapture()) {
         ReleaseCapture();
       }

vnext/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.h

@@ -82,6 +82,7 @@ struct ReactNativeIsland
   void AddRenderedVisual(const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual) noexcept;
   void RemoveRenderedVisual(const winrt::Microsoft::ReactNative::Composition::Experimental::IVisual &visual) noexcept;
   bool TrySetFocus() noexcept;
+  HWND GetHwndForParenting() noexcept;
 
   winrt::Microsoft::ReactNative::Composition::ICustomResourceLoader Resources() noexcept;
   void Resources(const winrt::Microsoft::ReactNative::Composition::ICustomResourceLoader &resources) noexcept;

vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp

@@ -231,4 +231,15 @@ winrt::Microsoft::ReactNative::implementation::ClipState RootComponentView::getC
   return winrt::Microsoft::ReactNative::implementation::ClipState::NoClip;
 }
 
+HWND RootComponentView::GetHwndForParenting() noexcept {
+  if (auto rootView = m_wkRootView.get()) {
+    auto hwnd = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(rootView)
+                    ->GetHwndForParenting();
+    if (hwnd)
+      return hwnd;
+  }
+
+  return base_type::GetHwndForParenting();
+}
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation