From 46ec2e2c5231bab3e7e3b00ed087b28692e504f3 Mon Sep 17 00:00:00 2001 From: p-sw Date: Tue, 11 Jun 2024 19:52:21 +0900 Subject: [PATCH] refactor(Tooltip): update tooltip transition and delay properties This commit updates the Tooltip component's transition and delay properties. The transition is now applied on transform, opacity, background color, text color, and border color. Additionally, the delay handling has been modified to use a CSS variable, improving flexibility and maintainability of code. --- packages/react/components/Tooltip.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/components/Tooltip.tsx b/packages/react/components/Tooltip.tsx index aee5a4a..e710463 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 delay-0 rounded-md`, + base: `absolute py-1 px-3 ${tooltipContentColors.background} border ${tooltipContentColors.border} [--tooltip-offset:2px] opacity-0 transition-all group-hover/tooltip:opacity-100 select-none pointer-events-none group-hover/tooltip:select-auto group-hover/tooltip:pointer-events-auto group-hover/tooltip:[transition:transform_150ms_ease-out_var(--delay),opacity_150ms_ease-out_var(--delay),background-color_150ms_ease-in-out,color_150ms_ease-in-out,border-color_150ms_ease-in-out] 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]", @@ -71,10 +71,10 @@ const [tooltipContentVariant, resolveTooltipContentVariantProps] = vcn({ "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", + none: "[--delay:0ms]", + early: "[--delay:150ms]", + normal: "[--delay:500ms]", + late: "[--delay:1000ms]", }, offset: { sm: "[--tooltip-offset:2px]",