Tooltip

npx shadcn@latest add https://ui.saasflare.io/r/tooltip.json

pnpm add @saasflare/ui

"use client"import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@saasflare/ui"/** A tooltip hint revealed on hover or focus of its trigger. */export function Demo() {    return (        <TooltipProvider>            <Tooltip>                <TooltipTrigger asChild>                    <Button variant="outline">Hover me</Button>                </TooltipTrigger>                <TooltipContent>Copies the API key to your clipboard</TooltipContent>            </Tooltip>        </TooltipProvider>    )}

"use client"import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@saasflare/ui"/** Tooltips positioned on each side of their trigger. */export function Demo() {    const sides = ["top", "right", "bottom", "left"] as const    return (        <TooltipProvider>            <div className="flex flex-wrap items-center gap-3">                {sides.map((side) => (                    <Tooltip key={side}>                        <TooltipTrigger asChild>                            <Button variant="outline" className="capitalize">                                {side}                            </Button>                        </TooltipTrigger>                        <TooltipContent side={side}>Anchored {side}</TooltipContent>                    </Tooltip>                ))}            </div>        </TooltipProvider>    )}

"use client"import {    Button,    Tooltip,    TooltipArrow,    TooltipContent,    TooltipProvider,    TooltipTrigger,} from "@saasflare/ui"/** * `TooltipArrow` rides inside `TooltipContent` and inherits the primary fill, * connecting the single-line label to its trigger. */export function Demo() {    return (        <TooltipProvider>            <Tooltip>                <TooltipTrigger asChild>                    <Button variant="outline">Hover me</Button>                </TooltipTrigger>                <TooltipContent>                    Copy link                    <TooltipArrow />                </TooltipContent>            </Tooltip>        </TooltipProvider>    )}