laif-ds/dist/agent-docs/components/Tooltip.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # Tooltip
 
 ## Overview
 
 Radix Tooltip wrappers with DS tokens and variants. Includes `TooltipProvider` for global delay, `Tooltip` root, `TooltipTrigger`, and `TooltipContent` with `primary` and `card` looks.
 
 ---
 
 ## Components & Props
 
 - **TooltipProvider**
   - `delayDuration?: number` (default `0`)
   - Provides default open delay for nested tooltips.
 - **Tooltip** (Root)
   - Inherits Radix `TooltipPrimitive.Root` props: `open?`, `defaultOpen?`, `onOpenChange?`, `disableHoverableContent?`.
   - Note: `delayDuration` is set via `TooltipProvider`, not here.
 - **TooltipTrigger**
   - Inherits Radix `Trigger` props. Use `asChild` to wrap buttons/links.
 - **TooltipContent**
   - Inherits Radix `Content` props: `side?`, `align?`, `sideOffset?` (default `0`), `alignOffset?`.
   - `variant?: "primary" | "card"` (default `"primary"`).
 
 ---
 
 ## Examples
 
 ### Default
 
 ```tsx
 import { Button, Tooltip, TooltipTrigger, TooltipContent } from "laif-ds";
 
 export function Basic() {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <Button variant="outline">Passa sopra</Button>
       </TooltipTrigger>
       <TooltipContent>Questo è un tooltip</TooltipContent>
     </Tooltip>
   );
 }
 ```
 
 ### Positioning
 
 ```tsx
 <div className="flex items-center gap-4">
   <Tooltip>
     <TooltipTrigger asChild><Button size="sm">Top</Button></TooltipTrigger>
     <TooltipContent side="top" sideOffset={5}>Tooltip in alto</TooltipContent>
   </Tooltip>
   <Tooltip>
     <TooltipTrigger asChild><Button size="sm">Right</Button></TooltipTrigger>
     <TooltipContent side="right" sideOffset={5}>Tooltip a destra</TooltipContent>
   </Tooltip>
 </div>
 ```
 
 ### With Delay
 
 ```tsx
 import { TooltipProvider } from "laif-ds";
 
 export function WithDelay() {
   return (
     <TooltipProvider delayDuration={500}>
       <Tooltip>
         <TooltipTrigger asChild><Button>Ritardo 500ms</Button></TooltipTrigger>
         <TooltipContent>Appare dopo 500ms</TooltipContent>
       </Tooltip>
     </TooltipProvider>
   );
 }
 ```
 
 ### Card Variant
 
 ```tsx
 <Tooltip>
   <TooltipTrigger asChild><Button variant="ghost">Info</Button></TooltipTrigger>
   <TooltipContent variant="card">Contenuto con bordo e shadow</TooltipContent>
 </Tooltip>
 ```
 
 ---
 
 ## Notes
 
 - **Variants**: `primary` for compact color tooltip; `card` for bordered content blocks.
 - **Groups**: Wrap toolbars with multiple triggers; provider can be defined once at app root.