Tooltip

1'use client';
2 
3import * as TooltipPrimitive from '@radix-ui/react-tooltip';
4import * as React from 'react';
5 
6import { cn } from '@/lib/utils';
7 
8function TooltipProvider({
9  delayDuration = 0,
10  ...props
11}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
12  return (
13    <TooltipPrimitive.Provider
14      data-slot="tooltip-provider"
15      delayDuration={delayDuration}
16      {...props}
17    />
18  );
19}
20 
21function Tooltip({
22  ...props
23}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
24  return (
25    <TooltipProvider>
26      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
27    </TooltipProvider>
28  );
29}
30 
31function TooltipTrigger({
32  ...props
33}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
34  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
35}
36 
37function TooltipContent({
38  className,
39  sideOffset = 0,
40  children,
41  ...props
42}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
43  const getTextContent = (node: React.ReactNode): string => {
44    if (typeof node === 'string') return node;
45    if (typeof node === 'number') return String(node);
46    if (Array.isArray(node)) return node.map(getTextContent).join('');
47 
48    if (React.isValidElement(node)) {
49      const nodeProps = node.props as { children?: React.ReactNode };
50 
51      if (nodeProps.children) {
52        return getTextContent(nodeProps.children);
53      }
54    }
55 
56    return '';
57  };
58 
59  const textContent = getTextContent(children);
60  const estimatedCharsPerLine = 35; // approximate for max-w-[220px] and paragraph-small-primary
61  const isMultiLine = textContent.length > estimatedCharsPerLine;
62 
63  return (
64    <TooltipPrimitive.Portal>
65      <TooltipPrimitive.Content
66        data-slot="tooltip-content"
67        sideOffset={sideOffset}
68        className={cn(
69          'bg-fill-primary text-fg-primary-inverse paragraph-small-primary animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 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 shadow-elevation-1 z-50 w-fit min-w-[36px] origin-(--radix-tooltip-content-transform-origin) text-balance',
70          isMultiLine ? 'max-w-[220px] p-2' : 'max-w-[140px] p-1',
71          className,
72        )}
73        {...props}>
74        {children}
75        <TooltipPrimitive.Arrow className="fill-fill-primary" />
76      </TooltipPrimitive.Content>
77// … truncated