Navigation & disclosure@neumorphism-ui/tooltip

Tooltip

Built on Base UI Tooltip by composing Provider, Root, Trigger, Portal, Positioner, and Popup. The default provider delay is 250ms, and the popup automatically avoids collisions around the trigger.

@neumorphism-ui/tooltip

Registry JSON

Preview

Hover the button or move focus to it.

Installation

npx shadcn@latest add @neumorphism-ui/tooltip

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/tooltip

Import

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

Example

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger
      render={<Button size="icon" aria-label="Open settings" />}
    >
      ⚙
    </TooltipTrigger>
    <TooltipContent side="top">
      Settings
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

Component	Prop	Type	Default	Description
`TooltipProvider`	`delay`	`number`	`250`	The delay in milliseconds before opening the tooltip after pointer hover.
`Tooltip`	`open / defaultOpen`	`boolean`	`false`	The controlled open state or initial uncontrolled open state.
`Tooltip`	`onOpenChange`	`(open: boolean) => void`	`—`	Called when the open state changes.
`TooltipTrigger`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	Composes tooltip trigger behavior onto a button or link.
`TooltipContent`	`side / align`	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"top" / "center"`	Positions the popup relative to the trigger.
`TooltipContent`	`sideOffset`	`number`	`8`	The distance between the trigger and popup.