1
5import * as React from "react";
6import * as RadixTooltip from "@radix-ui/react-tooltip";
7import { clsx } from "clsx";
8
9export const TooltipProvider = RadixTooltip.Provider;
10export const Tooltip = RadixTooltip.Root;
11export const TooltipTrigger = RadixTooltip.Trigger;
12
13export const TooltipContent = React.forwardRef<
14 React.ElementRef<typeof RadixTooltip.Content>,
15 React.ComponentPropsWithoutRef<typeof RadixTooltip.Content>
16>(({ className, sideOffset = 6, ...props }, ref) => (
17 <RadixTooltip.Portal>
18 <RadixTooltip.Content
19 ref={ref}
20 sideOffset={sideOffset}
21 className={clsx(
22 "z-50 max-w-xs px-2.5 py-1.5 text-xs font-medium",
23 "rounded-md bg-primary text-primary-foreground shadow-sm",
24 className,
25 )}
26 {...props}
27 />
28 </RadixTooltip.Portal>
29));
30TooltipContent.displayName = "TooltipContent";
31