راهنما (Tooltip)

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Button } from '@parto-system-design/ui'
;<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">راهنما</Button>
    </TooltipTrigger>
    <TooltipContent>
      <p>این یک راهنمای ابزار است</p>
    </TooltipContent>
  </Tooltip>
</TooltipProvider>

<div className="flex gap-4">
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">پیش‌فرض</Button>
    </TooltipTrigger>
    <TooltipContent variant="default">تولتیپ پیش‌فرض</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">روشن</Button>
    </TooltipTrigger>
    <TooltipContent variant="light">تولتیپ روشن</TooltipContent>
  </Tooltip>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline">خطا</Button>
    </TooltipTrigger>
    <TooltipContent variant="error">تولتیپ خطا</TooltipContent>
  </Tooltip>
</div>

import { Icons } from '@parto-system-design/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>