Tooltip
მოკლე მინიშნება hover-ზე ან ფოკუსზე. ხატულა-ღილაკებს აუცილებლად აქვთ aria-label — tooltip მას არ ცვლის.
მაგალითი
import { Button } from "@llc-conciergia/ui/button";
import {
Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
} from "@llc-conciergia/ui/tooltip";
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="outline" />}>დაჯავშნა</TooltipTrigger>
<TooltipContent>დააჭირეთ დასაჯავშნად</TooltipContent>
</Tooltip>
</TooltipProvider>ინსტალაცია
pnpm add @llc-conciergia/uiimport {
Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,
} from "@llc-conciergia/ui/tooltip";npx @llc-conciergia/cli add tooltipnpx shadcn@latest add https://ui.conciergia.co/r/tooltip.jsonშენიშვნები
TooltipProvider აპლიკაციაში ერთხელ ჩასვით (ამ საიტზე layout-შია) — ის tooltip-ებს შორის დაყოვნებას აზიარებს.
Props
| Prop | ტიპი | ნაგულისხმევი | აღწერა |
|---|---|---|---|
| TooltipProvider: delay | number | 300 | გახსნის დაყოვნება (ms). |
| Tooltip: open / defaultOpen | boolean | — | კონტროლირებადი ან საწყისი მდგომარეობა. |
| TooltipTrigger: render | ReactElement | — | trigger-ის ელემენტი, მაგ. <Button />. |
| TooltipContent: side / align / sideOffset | Base UI Positioner | "top" / "center" / 6 | პოზიციონირება. |
| TooltipContent: hideArrow | boolean | false | ისრის დამალვა. |