tooltip.tsx 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. 'use client';
  2. import * as React from 'react';
  3. import { Tooltip as TooltipPrimitive } from 'radix-ui';
  4. import { cn } from '@/lib/utils';
  5. function TooltipProvider({
  6. delayDuration = 0,
  7. ...props
  8. }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  9. return (
  10. <TooltipPrimitive.Provider
  11. data-slot="tooltip-provider"
  12. delayDuration={delayDuration}
  13. {...props}
  14. />
  15. );
  16. }
  17. function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  18. return (
  19. <TooltipProvider>
  20. <TooltipPrimitive.Root data-slot="tooltip" {...props} />
  21. </TooltipProvider>
  22. );
  23. }
  24. function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  25. return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
  26. }
  27. function TooltipContent({
  28. className,
  29. sideOffset = 0,
  30. children,
  31. ...props
  32. }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  33. return (
  34. <TooltipPrimitive.Portal>
  35. <TooltipPrimitive.Content
  36. data-slot="tooltip-content"
  37. sideOffset={sideOffset}
  38. className={cn(
  39. 'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-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 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)',
  40. className,
  41. )}
  42. {...props}
  43. >
  44. {children}
  45. <TooltipPrimitive.Arrow className="size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]" />
  46. </TooltipPrimitive.Content>
  47. </TooltipPrimitive.Portal>
  48. );
  49. }
  50. export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };