chore(client): fix type error due to React integration

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);

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}                    
                 />