Tooltip

1import * as React from 'react';
2import * as motion from 'motion/react-client';
3 
4import {
5  TooltipProvider as TooltipProviderPrimitive,
6  Tooltip as TooltipPrimitive,
7  TooltipTrigger as TooltipTriggerPrimitive,
8  TooltipContent as TooltipContentPrimitive,
9  TooltipArrow as TooltipArrowPrimitive,
10  type TooltipProviderProps as TooltipProviderPrimitiveProps,
11  type TooltipProps as TooltipPrimitiveProps,
12  type TooltipTriggerProps as TooltipTriggerPrimitiveProps,
13  type TooltipContentProps as TooltipContentPrimitiveProps,
14} from '@/components/animate-ui/primitives/animate/tooltip';
15import { cn } from '@/lib/utils';
16 
17type TooltipProviderProps = TooltipProviderPrimitiveProps;
18 
19function TooltipProvider({ openDelay = 0, ...props }: TooltipProviderProps) {
20  return <TooltipProviderPrimitive openDelay={openDelay} {...props} />;
21}
22 
23type TooltipProps = TooltipPrimitiveProps;
24 
25function Tooltip({ sideOffset = 10, ...props }: TooltipProps) {
26  return <TooltipPrimitive sideOffset={sideOffset} {...props} />;
27}
28 
29type TooltipTriggerProps = TooltipTriggerPrimitiveProps;
30 
31function TooltipTrigger({ ...props }: TooltipTriggerProps) {
32  return <TooltipTriggerPrimitive {...props} />;
33}
34 
35type TooltipContentProps = Omit<TooltipContentPrimitiveProps, 'asChild'> & {
36  children: React.ReactNode;
37  layout?: boolean | 'position' | 'size' | 'preserve-aspect';
38};
39 
40function TooltipContent({
41  className,
42  children,
43  layout = 'preserve-aspect',
44  ...props
45}: TooltipContentProps) {
46  return (
47    <TooltipContentPrimitive
48      className={cn(
49        'z-50 w-fit bg-primary text-primary-foreground rounded-md',
50        className,
51      )}
52      {...props}
53    >
54      <motion.div className="overflow-hidden px-3 py-1.5 text-xs text-balance">
55        <motion.div layout={layout}>{children}</motion.div>
56      </motion.div>
57      <TooltipArrowPrimitive
58        className="fill-primary size-3 data-[side='bottom']:translate-y-[1px] data-[side='right']:translate-x-[1px] data-[side='left']:translate-x-[-1px] data-[side='top']:translate-y-[-1px]"
59        tipRadius={2}
60      />
61    </TooltipContentPrimitive>
62  );
63}
64 
65export {
66  TooltipProvider,
67  Tooltip,
68  TooltipTrigger,
69  TooltipContent,
70  type TooltipProviderProps,
71  type TooltipProps,
72  type TooltipTriggerProps,
73  type TooltipContentProps,
74};