Tooltip
A short description on hover or keyboard focus.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Tooltip
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/tooltip.json'Usage
A complete example using the installed component and hook paths.
Tooltip usage
"use client";import { Button } from "@/components/ui/button";import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";function TooltipPreview() { return ( <Tooltip> <TooltipTrigger render={<Button variant="outline" />}>Hover or focus here</TooltipTrigger> <TooltipContent>Details for this control</TooltipContent> </Tooltip> );}export default function Demo() { return <TooltipPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Tooltip
Tooltip props
TooltipPrimitive.Root.Props<Payload>TooltipTrigger
TooltipTrigger props
TooltipPrimitive.Trigger.Props<Payload> & { sound?: boolean }- sound
- true
TooltipContent
TooltipContent props
TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">- side
- "top"
- sideOffset
- 4
- align
- "center"
- alignOffset
- 0
TooltipProvider
TooltipProvider props
TooltipPrimitive.Provider.Props- delay
- 0