Tooltip

1import * as React from 'react';
2 
3import {
4  TooltipProvider as TooltipProviderPrimitive,
5  Tooltip as TooltipPrimitive,
6  TooltipTrigger as TooltipTriggerPrimitive,
7  TooltipPositioner as TooltipPositionerPrimitive,
8  TooltipPopup as TooltipPopupPrimitive,
9  TooltipArrow as TooltipArrowPrimitive,
10  TooltipPortal as TooltipPortalPrimitive,
11  type TooltipProviderProps as TooltipProviderPrimitiveProps,
12  type TooltipProps as TooltipPrimitiveProps,
13  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,
14  type TooltipPositionerProps as TooltipPositionerPrimitiveProps,
15  type TooltipPopupProps as TooltipPopupPrimitiveProps,
16} from '@/components/animate-ui/primitives/base/tooltip';
17import { cn } from '@/lib/utils';
18 
19type TooltipProviderProps = TooltipProviderPrimitiveProps;
20 
21function TooltipProvider({ delay = 0, ...props }: TooltipProviderProps) {
22  return <TooltipProviderPrimitive delay={delay} {...props} />;
23}
24 
25type TooltipProps = TooltipPrimitiveProps & {
26  delay?: TooltipPrimitiveProps['delay'];
27};
28 
29function Tooltip({ delay = 0, ...props }: TooltipProps) {
30  return (
31    <TooltipProvider delay={delay}>
32      <TooltipPrimitive {...props} />
33    </TooltipProvider>
34  );
35}
36 
37type TooltipTriggerProps = TooltipTriggerPrimitiveProps;
38 
39function TooltipTrigger({ ...props }: TooltipTriggerProps) {
40  return <TooltipTriggerPrimitive {...props} />;
41}
42 
43type TooltipPanelProps = TooltipPositionerPrimitiveProps &
44  TooltipPopupPrimitiveProps;
45 
46function TooltipPanel({
47  className,
48  sideOffset = 4,
49  children,
50  style,
51  ...props
52}: TooltipPanelProps) {
53  return (
54    <TooltipPortalPrimitive>
55      <TooltipPositionerPrimitive
56        sideOffset={sideOffset}
57        className="z-50"
58        {...props}
59      >
60        <TooltipPopupPrimitive
61          className={cn(
62            'bg-primary text-primary-foreground w-fit origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
63            className,
64          )}
65          style={style}
66        >
67          {children}
68          <TooltipArrowPrimitive className="bg-primary fill-primary z-50 size-2.5 data-[side='bottom']:-top-[4px] data-[side='right']:-left-[4px] data-[side='left']:-right-[4px] data-[side='inline-start']:-right-[4px] data-[side='inline-end']:-left-[4px] rotate-45 rounded-[2px]" />
69        </TooltipPopupPrimitive>
70      </TooltipPositionerPrimitive>
71    </TooltipPortalPrimitive>
72  );
73}
74 
75export {
76  Tooltip,
77  TooltipTrigger,
78  TooltipPanel,
79  type TooltipProps,
80  type TooltipTriggerProps,
81// … truncated