Components
Tooltip

Tooltip

Displays a form tooltip or a component that looks like a tooltip.

How it works

Install the following dependencies:

pnpm add motion

Create a new file at lib/utils.ts and add the provided code.

import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

Create a file at components/ui/tooltip.tsx and paste the given code.

label.tsx

Import and use the Accordion component in your application.

import { Button } from "@/components/ui/button";
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from "@/components/ui/tooltip";
 
export default function TooltipDemo() {
    return (
        <TooltipProvider>
            <Tooltip>
                <TooltipTrigger asChild>
                    <Button variant="outline">Hover</Button>
                </TooltipTrigger>
                <TooltipContent>
                    <p>Add to library</p>
                </TooltipContent>
            </Tooltip>
        </TooltipProvider>
    );
}

Examples

Default

W/ helper text

W/ character count

W/ label animation

Auto-growing tooltip