Tooltip
A tooltip component that displays informative text when hovering over an element.
Preview
import {
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@/components/ui/Tooltip";
import { Button } from "@/components/ui/Button";
export function TooltipDemo() {
return (
<Tooltip>
<TooltipTrigger asChild>
<Button variant="pill">Hover me</Button>
</TooltipTrigger>
<TooltipContent>
<p>This is a tooltip</p>
</TooltipContent>
</Tooltip>
)
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/tooltipManual
Install the following dependencies:
pnpm install radix-uiCopy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Tooltip component into your components/ui/Tooltip.tsx file.
"use client"
import * as React from "react"
import { Tooltip as TooltipPrimitive } from "radix-ui"
import { cn } from "@/utils/class-names"
function TooltipProvider({
delayDuration = 0,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
)
}
function Tooltip({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
</TooltipProvider>
)
}
function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}
function TooltipContent({
className,
sideOffset = 0,
children,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
return (
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
data-slot="tooltip-content"
sideOffset={sideOffset}
className={cn(
"bg-gray-12 text-gray-1 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-1 py-0.25 text-sm text-balance data-[state=open]:animate-tooltip-show data-[state=closed]:animate-tooltip-hide",
className
)}
{...props}
>
{children}
<TooltipPrimitive.Arrow className="fill-gray-12" />
</TooltipPrimitive.Content>
</TooltipPrimitive.Portal>
)
}
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }