Tooltip

1import { Tooltip as BaseTooltip } from "@base-ui/react";
2import { cn } from "@/lib/utils";
3 
4function Tooltip({ children, ...props }: BaseTooltip.Root.Props) {
5  return (
6    <BaseTooltip.Provider delay={0}>
7      <BaseTooltip.Root {...props}>{children}</BaseTooltip.Root>
8    </BaseTooltip.Provider>
9  );
10}
11function TooltipContent({ children, className, ...props }: BaseTooltip.Positioner.Props) {
12  return (
13    <BaseTooltip.Portal>
14      <BaseTooltip.Positioner sideOffset={10} {...props}>
15        <BaseTooltip.Popup
16          className={cn(
17            "typography-body-medium flex flex-col rounded-md bg-grey-900 px-2 py-1 text-white-1000 shadow-300",
18            className,
19          )}
20        >
21          <BaseTooltip.Arrow className="data-[side=bottom]:top-[-6px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180">
22            <ArrowSvg className="text-grey-900" />
23          </BaseTooltip.Arrow>
24          {children}
25        </BaseTooltip.Popup>
26      </BaseTooltip.Positioner>
27    </BaseTooltip.Portal>
28  );
29}
30 
31function ArrowSvg({ className, ...props }: React.ComponentProps<"svg">) {
32  return (
33    <svg
34      xmlns="http://www.w3.org/2000/svg"
35      width="12"
36      height="6"
37      viewBox="0 0 12 6"
38      className={className}
39      {...props}
40    >
41      <path d="M6 5.24537e-07L5.24537e-07 6L12 6L6 5.24537e-07Z" fill="currentColor" />
42    </svg>
43  );
44}
45 
46const TooltipTrigger = BaseTooltip.Trigger;
47const TooltipProvider = BaseTooltip.Provider;
48const TooltipRoot = BaseTooltip.Root;
49 
50export { Tooltip, TooltipTrigger, TooltipProvider, TooltipRoot, TooltipContent };