Minimal Tooltip

A lightweight tooltip component that displays contextual information on hover with customizable positioning and smooth fade animations.

Preview

Hover me

Helpful information

Bottom

Bottom tooltip

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/tooltip.json

Import the component:

import { Tooltip } from "@/components/tooltip"

Use it in your code:

<Tooltip text="Helpful information">
  <button>Hover me</button>
</Tooltip>

Property	Type	Default	Description
`children*`	`ReactNode`	`-`	The element that triggers the tooltip on hover.
`text*`	`string`	`-`	The text content to display in the tooltip.
`position`	`string`	`"top"`	Position of the tooltip relative to the trigger element. Options: 'top', 'bottom', 'left', 'right'.
`className`	`string`	`""`	Additional CSS classes to apply to the tooltip container.