Props

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.

Minimal Tooltip

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

Preview

Helpful information

Bottom position

Install the component using the CLI.

npx shadcn@latest add https://siddz.com/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.