From b28e5d1c8d927dcfe14390fb5b9ec9e89cce2bde Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Tue, 11 Jun 2024 19:23:29 +0900
Subject: [PATCH] feat(Tooltip): add delay variants

This change introduces new delay variants to Tooltip component. This feature allows adjusting the delay before the tooltip appears, ranging from no delay, early appearance, normal delay to a late appearance, enhancing usability according to different use-cases. The default delay is set to normal.
---
 packages/react/components/Tooltip.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react/components/Tooltip.tsx b/packages/react/components/Tooltip.tsx
index dfd3757..aee5a4a 100644
--- a/packages/react/components/Tooltip.tsx
+++ b/packages/react/components/Tooltip.tsx
@@ -60,7 +60,7 @@ const tooltipContentColors = {
 };
 
 const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
-  base: `absolute py-1 px-3 ${tooltipContentColors.background} border ${tooltipContentColors.border} [--tooltip-offset:2px] opacity-0 group-hover/tooltip:opacity-100 select-none pointer-events-none group-hover/tooltip:select-auto group-hover/tooltip:pointer-events-auto transition-all rounded-md`,
+  base: `absolute py-1 px-3 ${tooltipContentColors.background} border ${tooltipContentColors.border} [--tooltip-offset:2px] opacity-0 group-hover/tooltip:opacity-100 select-none pointer-events-none group-hover/tooltip:select-auto group-hover/tooltip:pointer-events-auto transition-all delay-0 rounded-md`,
   variants: {
     position: {
       top: "bottom-[calc(100%+var(--tooltip-offset))] left-1/2 -translate-x-1/2 group-hover/tooltip:translate-y-0 translate-y-[10px]",
@@ -70,6 +70,12 @@ const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
       right:
         "left-[calc(100%+var(--tooltip-offset))] top-1/2 -translate-y-1/2 group-hover/tooltip:translate-x-0 translate-x-[-10px]",
     },
+    delay: {
+      none: "group-hover/tooltip:delay-0",
+      early: "group-hover/tooltip:delay-150",
+      normal: "group-hover/tooltip:delay-500",
+      late: "group-hover/tooltip:delay-1000",
+    },
     offset: {
       sm: "[--tooltip-offset:2px]",
       md: "[--tooltip-offset:4px]",
@@ -79,6 +85,7 @@ const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({
   defaults: {
     position: "top",
     offset: "md",
+    delay: "normal",
   },
 });