راهنمای کوتاه
توضیح کوتاه یک کنترل هنگام hover یا فوکوس.
import { Tooltip } from "@kashi-ui/react";نمونه
نشانگر را روی دکمه‌ها ببرید یا با Tab روی آن‌ها بروید.
<Tooltip content="جستجو در همهٔ پروژه‌ها">
<Button iconOnly aria-label="جستجو"><SearchIcon /></Button>
</Tooltip>
<Tooltip content="ایمیل برای همه قابل‌مشاهده نیست" placement="bottom">
…
</Tooltip>ویژگی‌ها
| نام | نوع | پیش‌فرض | توضیح |
|---|---|---|---|
content | ReactNode | — | متن راهنما |
children | ReactElement | — | یک عنصر فوکوس‌پذیر، معمولاً دکمه |
placement | "top" | "bottom" | "top" | جایگاه |
delay | number | 300 | تأخیر نمایش با hover (میلی‌ثانیه)؛ با فوکوس فوری است |
دسترس‌پذیری
- با
aria-describedbyبه عنصر متصل است؛ صفحه‌خوان آن را پس از نام دکمه می‌خواند. - طبق WCAG 1.4.13: با Esc بسته می‌شود، نشانگر می‌تواند روی خود راهنما برود بدون اینکه بسته شود، و تا وقتی hover یا فوکوس ادامه دارد می‌ماند.
- راهنمای کوتاه جایگزین برچسب نیست: دکمهٔ فقط‌آیکون همچنان
aria-labelلازم دارد. اطلاعات ضروری را در آن پنهان نکنید؛ کاربران لمسی آن را نمی‌بینند.