From 76d308013e256a4119d66c6f59b120d917fb7c09 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 7 Oct 2024 08:15:46 +1000
Subject: [PATCH] fix(tooltip): set default openDelay to 500ms

In 76a6ea858fffcf87e784d9f7aef3727723b40c81 all `onClick` events were changed to `onPointerUp`. This allows Apple Pencil to work on buttons with tooltips.

Unfortunately, this changes click behaviour in a subtle way. With `onClick`, if you mouse down on an element, then move the mouse to a different element before releasing the mouse, nothing happens. With `onPointerUp`, the different element is clicked.

An alternate solution to is set a default `openDelay` on Tooltips to a higher value (default is no delay). I did a bit of searching and found it's actually considered a best-practice to make the delay ~500ms by default, and only reduce the delay in specific use-cases where it makes sense.

Tooltip now has a default `openDelay` of 500ms.
---
 lib/components/tooltip/tooltip.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/lib/components/tooltip/tooltip.tsx b/lib/components/tooltip/tooltip.tsx
index d59335b..d2bb8da 100644
--- a/lib/components/tooltip/tooltip.tsx
+++ b/lib/components/tooltip/tooltip.tsx
@@ -16,9 +16,17 @@ const modifiers: TooltipProps['modifiers'] = [
 
 export const Tooltip: ComponentWithAs<ComponentWithAs<'div', ChakraTooltipProps>, ChakraTooltipProps> = typedMemo(
   forwardRef<TooltipProps, typeof ChakraTooltip>((props: TooltipProps, ref) => {
-    const { children, hasArrow = true, placement = 'top', ...rest } = props;
+    const { children, hasArrow = true, placement = 'top', openDelay = 500, ...rest } = props;
     return (
-      <ChakraTooltip ref={ref} hasArrow={hasArrow} placement={placement} arrowSize={8} modifiers={modifiers} {...rest}>
+      <ChakraTooltip
+        ref={ref}
+        hasArrow={hasArrow}
+        placement={placement}
+        arrowSize={8}
+        modifiers={modifiers}
+        openDelay={openDelay}
+        {...rest}
+      >
         {children}
       </ChakraTooltip>
     );