Tooltip

Pure CSS tooltip with 4 position options. Zero JavaScript.

Preview

TopTop tooltipBottomBottom tooltipLeftLeft tooltipRightRight tooltip

Installation

npx drivn add tooltip

Usage

1 import { Tooltip } from "@/components/ui/tooltip"
2 
3 export default function Page() {
4   return (
5     <Tooltip content="This is a tooltip">
6       <span>Hover me</span>
7     </Tooltip>
8   )
9 }

API Reference

Prop	Type	Default	Description
`content`	string	—	The text displayed inside the tooltip
`position`	"top" \| "bottom" \| "left" \| "right"	"top"	Where the tooltip appears relative to the trigger element
`className`	string	—	Additional CSS classes to apply to the tooltip container
`children`	ReactNode	—	The trigger element that shows the tooltip on hover

1	import { Tooltip } from "@/components/ui/tooltip"
2
3	export default function Page() {
4	return (
5	<Tooltip content="This is a tooltip">
6	<span>Hover me</span>
7	</Tooltip>
8	)
9	}