TaavUI Lab
Primitive

TaavTooltip

راهنمای شناور دسترس‌پذیر مبتنی بر Radix با پشتیبانی RTL.

import { TaavTooltip, TaavTooltipProvider } from '@repo/ui';

فقط از props رسمی TaavUI استفاده کنید. unsafeClassName و escape hatchهای مشابه فقط برای موارد نادر هستند و نباید در مثال‌های عادی دیده شوند.

استفاده پایه

RTL Preview
<TaavTooltip content="متن"><TaavButton>...</TaavButton></TaavTooltip>

Sides

پیش‌نمایش
toprightbottomleft

Props

Propنوعپیش‌فرضتوضیح
content*ReactNodeمتن راهنما
side'top' | 'right' | 'bottom' | 'left'topموقعیت نسبت به trigger
align'start' | 'center' | 'end'centerتراز در محور جانبی
delayDurationnumber200تاخیر نمایش (ms)
children*ReactNodeعنصر trigger

Design Specs

Radiusvar(--taav-tooltip-radius)
Paddingvar(--taav-tooltip-padding-x/y)
Max widthvar(--taav-tooltip-max-width)
Shadowvar(--taav-tooltip-shadow)
Z-indexvar(--taav-z-tooltip)
TaavTooltipProvider

دسترس‌پذیری

راهنمای استفاده در DastRanj / VahedYek

  • Tooltip جایگزین label اصلی نیست.
  • متن باید کوتاه و تکمیلی باشد.
  • Radix keyboard و focus management را مدیریت می‌کند.

Do / Don't

انجام دهید

  • برای توضیح specs یا آیکون‌ها استفاده کنید

انجام ندهید

  • متن طولانی یا فرم داخل tooltip نگذارید