SYS:ONLINE● ACTIVE
THEME
GITHUBv0.1.0

TOOLTIP

Contextual label built on Radix UI. Appears on hover/focus with fade + zoom animation. Requires wrapping TooltipProvider.

DEPS:@radix-ui/react-tooltip

PREVIEW

INSTALLATION

BASH
npx shadcn@latest add @scificn/tooltip

USAGE

TSX
import {
  Tooltip, TooltipTrigger, TooltipContent, TooltipProvider,
} from '@/ui/tooltip'

// Wrap your app (or a section) with TooltipProvider once
export function App() {
  return (
    <TooltipProvider>
      {/* ... app content ... */}
    </TooltipProvider>
  )
}

// Then use Tooltip anywhere inside:
export function IconButton() {
  return (
    <Tooltip>
      <TooltipTrigger asChild>
        <button>◎</button>
      </TooltipTrigger>
      <TooltipContent side="bottom">TARGET LOCK</TooltipContent>
    </Tooltip>
  )
}

PLACEMENT

ANATOMY

TooltipProviderContext provider. Required once per subtree. Controls open delay.
TooltipRoot — manages hover state.
TooltipTriggerThe element that shows the tooltip on hover/focus. Use asChild to style any element.
TooltipContentThe tooltip panel. Portaled. Has fade + zoom entrance animation.

PROPS

PROPTYPEDEFAULTDESCRIPTION
side"top" | "right" | "bottom" | "left""top"Side of the trigger where the tooltip appears.
sideOffsetnumber6Pixel offset from the trigger element.
delayDurationnumber (on Provider)400Milliseconds before the tooltip opens on hover.