Components

Tooltip

A popup that displays information on hover.

example.tsx

Import

tsx

import { AppTooltip, AppTooltipProvider, AppTooltipTrigger, AppTooltipContent } from "@/components/primitives/AppTooltip"

API Reference

AppTooltip extends all native <div> HTML attributes.

Prop	Type	Default	Description
open	boolean	—	The controlled open state of the tooltip.
onOpenChange	(open: boolean) => void	—	Callback fired when the open state changes.
defaultOpen	boolean	—	The default open state of the tooltip.
className	string	—	Additional Tailwind classes merged via cn().

Source

src/components/primitives/AppTooltip.tsx

"use client"

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip"

function AppTooltipProvider({ children }: { children: React.ReactNode }) {
  return <TooltipProvider>{children}</TooltipProvider>
}

function AppTooltip(props: React.ComponentProps<typeof Tooltip>) {
  return <Tooltip {...props} />
}

function AppTooltipTrigger(props: React.ComponentProps<typeof TooltipTrigger>) {
  return <TooltipTrigger {...props} />
}

function AppTooltipContent(props: React.ComponentPropsWithoutRef<typeof TooltipContent>) {
  return (
    <TooltipContent {...props}>
      {props.children}
    </TooltipContent>
  )
}

export { AppTooltip, AppTooltipProvider, AppTooltipTrigger, AppTooltipContent }