From ed320e4e24bbea10d1ba22d31811bdc6ec015139 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 27 Aug 2025 11:59:07 +0300
Subject: [PATCH] chore(client): fix type error due to React integration

---
 apps/client/src/widgets/react/hooks.tsx   | 18 ++++++++++++++++++
 apps/client/src/widgets/ribbon/Ribbon.tsx |  8 ++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index c968e7498..1110f4e1b 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -504,6 +504,24 @@ export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Toolti
     return { showTooltip, hideTooltip };
 }
 
+/**
+ * Similar to {@link useTooltip}, but doesn't expose methods to imperatively hide or show the tooltip.
+ * 
+ * @param elRef the element to bind the tooltip to.
+ * @param config optionally, the tooltip configuration.
+ */
+export function useStaticTooltip(elRef: RefObject<HTMLElement>, config?: Partial<Tooltip.Options>) {
+    useEffect(() => {
+        if (!elRef?.current) return;
+
+        const $el = $(elRef.current);
+        $el.tooltip(config);
+        return () => {
+            $el.tooltip("dispose");
+        }
+    }, [ elRef, config ]);
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export function useLegacyImperativeHandlers(handlers: Record<string, Function>) {
     const parentComponent = useContext(ParentComponent);
diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index bf1b310aa..cbdd2f619 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
-import { useNoteContext, useTriliumEvents } from "../react/hooks";
+import { useNoteContext, useStaticTooltip, useTooltip, useTriliumEvents } from "../react/hooks";
 import "./style.css";
 import { VNode } from "preact";
 import BasicPropertiesTab from "./BasicPropertiesTab";
@@ -233,6 +233,9 @@ export default function Ribbon() {
 }
 
 function RibbonTab({ icon, title, active, onClick }: { icon: string; title: string; active: boolean, onClick: () => void }) {
+    const iconRef = useRef<HTMLDivElement>(null);
+    useStaticTooltip(iconRef, {  });
+
     return (
         <>
             <div
@@ -240,6 +243,7 @@ function RibbonTab({ icon, title, active, onClick }: { icon: string; title: stri
                 onClick={onClick}
             >
                 <span
+                    ref={iconRef}
                     className={`ribbon-tab-title-icon ${icon}`}
                     title={title}                    
                 />