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, config: Partial, config?: Partial) { + 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) { 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(null); + useStaticTooltip(iconRef, { }); + return ( <>