راهنما (Tooltip)

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
  Button,
} from '@parto/ui';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">راهنما</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>این یک راهنمای ابزار است</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

import { Icons } from '@parto/ui';

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="ghost" size="icon">
        <Icons.info className="h-4 w-4" />
      </Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>اطلاعات بیشتر</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

<Tooltip>
  <TooltipTrigger>راهنما</TooltipTrigger>
  <TooltipContent side="bottom">
    <p>نمایش در پایین</p>
  </TooltipContent>
</Tooltip>

<TooltipProvider delayDuration={300}>
  <Tooltip>
    <TooltipTrigger>راهنما</TooltipTrigger>
    <TooltipContent>
      <p>با تاخیر ۳۰۰ میلی‌ثانیه</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

<Tooltip>
  <TooltipTrigger>اطلاعات</TooltipTrigger>
  <TooltipContent className="max-w-xs">
    <div className="space-y-2">
      <p className="font-semibold">عنوان</p>
      <p className="text-sm">
        این یک راهنمای ابزار با محتوای پیچیده‌تر است که می‌تواند
        شامل چندین خط متن باشد.
      </p>
    </div>
  </TooltipContent>
</Tooltip>