From c5254c3e6b338e7f87b8359f1bd36bd02bb2f177 Mon Sep 17 00:00:00 2001
From: Aria Minaei <aria.minaei@gmail.com>
Date: Fri, 20 Aug 2021 20:58:02 +0200
Subject: [PATCH] UX tweak for tooltips

---
 .../studio/src/uiComponents/Popover/TooltipContext.tsx    | 3 ++-
 theatre/studio/src/uiComponents/Popover/useTooltip.tsx    | 8 ++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx b/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx
index 870d382..8f0330e 100644
--- a/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx
+++ b/theatre/studio/src/uiComponents/Popover/TooltipContext.tsx
@@ -46,11 +46,12 @@ const TooltipContext: React.FC<{}> = ({children}) => {
   const set = useMemo(() => {
     let lastTimeout: NodeJS.Timeout | undefined = undefined
     return (id: number, delay: number) => {
+      const overridingPreviousTimeout = lastTimeout !== undefined
       if (lastTimeout !== undefined) {
         clearTimeout(lastTimeout)
         lastTimeout = undefined
       }
-      if (delay === 0) {
+      if (delay === 0 || overridingPreviousTimeout) {
         currentTooltipId.set(id)
       } else {
         lastTimeout = setTimeout(() => {
diff --git a/theatre/studio/src/uiComponents/Popover/useTooltip.tsx b/theatre/studio/src/uiComponents/Popover/useTooltip.tsx
index 2f302a1..6f0140c 100644
--- a/theatre/studio/src/uiComponents/Popover/useTooltip.tsx
+++ b/theatre/studio/src/uiComponents/Popover/useTooltip.tsx
@@ -10,7 +10,7 @@ import {PortalContext} from 'reakit'
 import noop from '@theatre/shared/utils/noop'
 
 export default function useTooltip(
-  opts: {enabled?: boolean; delay?: number},
+  opts: {enabled?: boolean; enterDelay?: number; exitDelay?: number},
   render: () => React.ReactElement,
 ): [
   node: React.ReactNode,
@@ -32,8 +32,8 @@ export default function useTooltip(
     const target = targetRef.current
     if (!target) return
 
-    const onMouseEnter = () => setIsOpen(true, opts.delay ?? 200)
-    const onMouseLeave = () => setIsOpen(false, opts.delay ?? 200)
+    const onMouseEnter = () => setIsOpen(true, opts.enterDelay ?? 400)
+    const onMouseLeave = () => setIsOpen(false, opts.exitDelay ?? 200)
 
     target.addEventListener('mouseenter', onMouseEnter)
     target.addEventListener('mouseleave', onMouseLeave)
@@ -42,7 +42,7 @@ export default function useTooltip(
       target.removeEventListener('mouseenter', onMouseEnter)
       target.removeEventListener('mouseleave', onMouseLeave)
     }
-  }, [targetRef, enabled, opts.delay])
+  }, [targetRef, enabled, opts.enterDelay, opts.exitDelay])
 
   const portalLayer = useContext(PortalContext)