Tooltip

1'use client';
2/* eslint-disable eslint-frontend-rules/top-level-const-snake */
3 
4import * as TooltipPrimitive from '@radix-ui/react-tooltip';
5import { cva, type VariantProps } from 'class-variance-authority';
6import { ComponentProps } from 'react';
7 
8import { cn } from '@/lib/utils';
9 
10/*
11 * UX4G tooltip: max-width 200px, padding 0.25rem 0.5rem, border-radius 0.25rem,
12 * bg neutral (#212121), text neutral-0, font-size 0.875rem.
13 */
14const TOOLTIP_VARIANTS = cva('z-50 overflow-hidden rounded px-2 py-1 text-sm shadow-md', {
15  variants: {
16    theme: {
17      neutral: 'bg-neutral text-neutral-0',
18      primary: 'bg-primary text-neutral-0',
19      secondary: 'bg-secondary text-neutral-0',
20      success: 'bg-success text-neutral-0',
21      danger: 'bg-danger text-neutral-0',
22      warning: 'bg-warning text-neutral-0',
23      info: 'bg-info text-neutral-0',
24      light: 'bg-neutral-0 text-neutral border border-neutral-200',
25    },
26  },
27  defaultVariants: {
28    theme: 'neutral',
29  },
30});
31 
32const TooltipProvider = TooltipPrimitive.Provider;
33const Tooltip = TooltipPrimitive.Root;
34const TooltipTrigger = TooltipPrimitive.Trigger;
35 
36interface ITooltipContentProps
37  extends ComponentProps<typeof TooltipPrimitive.Content>,
38    VariantProps<typeof TOOLTIP_VARIANTS> {}
39 
40/** Tooltip popup content with positioning. */
41function TooltipContent({ className, sideOffset = 4, theme, ...props }: ITooltipContentProps) {
42  return (
43    <TooltipPrimitive.Portal>
44      <TooltipPrimitive.Content
45        sideOffset={sideOffset}
46        className={cn(
47          TOOLTIP_VARIANTS({ theme }),
48          'animate-in fade-in-0 zoom-in-95',
49          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
50          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
51          className,
52        )}
53        {...props}
54      />
55    </TooltipPrimitive.Portal>
56  );
57}
58 
59export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TOOLTIP_VARIANTS };