Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

npx shadcn@latest add https://spoke.georgedrury.co.uk/r/tooltip

Lineage

Spoke

Anatomy

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

export default () => (
	<TooltipProvider>
		<Tooltip>
			<TooltipTrigger />
			<TooltipContent />
		</Tooltip>
	</TooltipProvider>
)

Spoke utility classes

Class	Fallback chain	Description
`--tooltip`	`var(--foreground)`	Colour for tooltip
`--tooltip-foreground`	`var(--background)`	Text/icon colour for tooltip
`--tooltip-radius`	`var(--radius-md)`	Border radius for tooltip