components

Tooltip

Provide additional information on hover or focus

Source CodeRadix UI

Installation

pnpm dlx radianui@latest add tooltip

Usage

Imports

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

Code

<Tooltip>
	<TooltipTrigger>Hover Me</TooltipTrigger>
	<TooltipContent>This is a tooltip.</TooltipContent>
</Tooltip>

Examples

Theme

With Arrow

Side

Align

Tooltip with Title and Description

Custom Tooltip - w/Chart

Custom Tooltip - w/Image

Custom Tooltip - w/Icon & Title

Props

<Tooltip>
NameDefaultValues
External Reference--
<TooltipTrigger>
NameDefaultValues
External Reference--
<TooltipContent>
NameDefaultValues
themedefaultlightdefault
withArrowfalseboolean
External Reference--