p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Tooltip): add delay variants

Browse Source 
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.
This commit is contained in:
p-sw 2024-06-11 19:23:29 +09:00
parent c27e7bd2c5
commit b28e5d1c8d
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/react/components/Tooltip.tsx
View File

@ -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",
},
});