tooltip.jsx 1.6 KB

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