diff --git a/fe_calckey/frontend/client/src/scripts/use-tooltip.ts b/fe_calckey/frontend/client/src/scripts/use-tooltip.ts index 4cf182d..7651574 100644 --- a/fe_calckey/frontend/client/src/scripts/use-tooltip.ts +++ b/fe_calckey/frontend/client/src/scripts/use-tooltip.ts @@ -66,33 +66,39 @@ export function useTooltip( close(); }; - const stop = watch( - elRef, - () => { - if (elRef.value) { - stop(); - const el = - elRef.value instanceof Element - ? elRef.value - : elRef.value.$el; - el.addEventListener("mouseover", onMouseover, { - passive: true, - }); - el.addEventListener("mouseleave", onMouseleave, { - passive: true, - }); - el.addEventListener("touchstart", onTouchstart, { - passive: true, - }); - el.addEventListener("touchend", onTouchend, { passive: true }); - el.addEventListener("click", close, { passive: true }); + const addListeners = () => { + const el = + elRef.value instanceof Element ? elRef.value : elRef.value!.$el; + el.addEventListener("mouseover", onMouseover, { + passive: true, + }); + el.addEventListener("mouseleave", onMouseleave, { + passive: true, + }); + el.addEventListener("touchstart", onTouchstart, { + passive: true, + }); + el.addEventListener("touchend", onTouchend, { passive: true }); + el.addEventListener("click", close, { passive: true }); + }; + + // Can't use immediate, because of the self-reference of the watch stop handle + if (elRef.value) { + addListeners(); + } else { + const stop = watch( + elRef, + () => { + if (elRef.value) { + stop(); + addListeners(); + } + }, + { + flush: "post", } - }, - { - immediate: true, - flush: "post", - } - ); + ); + } onUnmounted(() => { close();