Tooltip

Component

Preview

Preview react

Usage

import { Tooltip, Tooltip_trigger, Tooltip_content, Tooltip_provider } from "@/components/ui/tooltip"

export function TooltipDemo() {
return (
  <Tooltip_provider>
    <Tooltip>
      <Tooltip_trigger className="px-4 py-2 rounded-md bg-primary text-primary-foreground">
        Hover me
      </Tooltip_trigger>
      <Tooltip_content>
        This is a tooltip
      </Tooltip_content>
    </Tooltip>
  </Tooltip_provider>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/tooltip.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/tooltip.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/tooltip.json

Manual

components/ui/tooltip.tsx

import { Tooltip as TooltipPrimitives } from "@ark-ui/react"
import { type ComponentProps } from "react"
import { cn } from "@/lib/utils"

export const Tooltip = TooltipPrimitives.Root

export const TooltipTrigger = TooltipPrimitives.Trigger

export interface TooltipContentProps extends ComponentProps<typeof TooltipPrimitives.Content> {}

export const TooltipContent = ({ className, ...props }: TooltipContentProps) => (
  <TooltipPrimitives.Content
    className={cn(
      "z-50 overflow-hidden rounded-md border bg-background px-3 py-1.5 text-sm shadow-md 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",
      className,
    )}
    {...props}
  />
)

export interface TooltipProviderProps extends ComponentProps<typeof TooltipPrimitives.Root> {}

export const TooltipProvider = (props: TooltipProviderProps) => <TooltipPrimitives.Root {...props} />