"use client"; import { forwardRef, type ComponentPropsWithoutRef, type ComponentRef, } from "react"; import * as TooltipPrimitive from "@radix-ui/react-tooltip"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/utils/cn"; const TooltipProvider = TooltipPrimitive.Provider; const Tooltip = TooltipPrimitive.Root; const TooltipTrigger = TooltipPrimitive.Trigger; const tooltipVariants = cva( "z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs bg-(--scheme-tint) text-(--scheme-foreground) 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", { variants: { scheme: { primary: `[--scheme-tint:var(--color-primary)] [--scheme-foreground:var(--color-primary-foreground)]`, secondary: `[--scheme-tint:var(--color-secondary)] [--scheme-foreground:var(--color-secondary-foreground)]`, tertiary: `[--scheme-tint:var(--color-tertiary)] [--scheme-foreground:var(--color-tertiary-foreground)]`, neutral: `[--scheme-tint:var(--color-neutral)] [--scheme-foreground:var(--color-neutral-foreground)]`, muted: `[--scheme-tint:var(--color-muted)] [--scheme-foreground:var(--color-muted-foreground)]`, good: `[--scheme-tint:var(--color-good)] [--scheme-foreground:var(--color-good-foreground)]`, caution: `[--scheme-tint:var(--color-caution)] [--scheme-foreground:var(--color-caution-foreground)]`, bad: `[--scheme-tint:var(--color-bad)] [--scheme-foreground:var(--color-bad-foreground)]`, }, }, defaultVariants: { scheme: "primary" }, } ); export interface TooltipContentProps extends ComponentPropsWithoutRef, VariantProps {} const TooltipContent = forwardRef< ComponentRef, TooltipContentProps >(({ className, sideOffset = 4, scheme, ...props }, ref) => ( )); TooltipContent.displayName = TooltipPrimitive.Content.displayName; const TooltipArrow = forwardRef< ComponentRef, ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName; export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow, tooltipVariants, };

Tooltip

Anatomy

Installation

Ensure Earthling UI is installed

Import the component from earthling-ui

The component is ready to use