Tooltip

کامپوننت Tooltip برای نمایش توضیح کوتاه هنگام نگه داشتن ماوس روی یک عنصر استفاده می‌شود؛ مثل توضیح عملکرد یک دکمه‌ی فقط-آیکون.

Import

import { Tooltip } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<Tooltip content="حذف آیتم">
  <Button variant="secondary">حذف</Button>
</Tooltip>

Playground

ماوس را روی دکمه نگه دار:

حذف آیتم

content

trigger

<Tooltip content="حذف آیتم">
  <Button variant="secondary">حذف</Button>
</Tooltip>

Content

content از نوع ReactNode است، پس علاوه بر متن ساده می‌توانی JSX هم پاس بدهی؛ مثلاً متن چندخطی یا با استایل.

Usage Notes

• Tooltip مکمل است، نه جایگزین — اطلاعات ضروری را فقط در Tooltip نگذار، چون در دستگاه‌های لمسی و برای کاربران keyboard در دسترس نیست.
• Tooltip با role="tooltip" پیاده شده و با hover نشان داده می‌شود (تعامل با صفحه‌کلید در حال حاضر پشتیبانی نمی‌شود).
• محتوای Tooltip در DOM قرار دارد و visibility آن با state داخلی تغییر می‌کند؛ اگر محتوای آن سنگین یا تعاملی است، از Popover استفاده کن.
• children را یک عنصر کوتاه و مشخص مثل Button، لینک یا آیکون بده. خود wrapper رفتار focus یا keyboard برای نمایش Tooltip اضافه نمی‌کند.

Icon Example

برای یک کنترل فقط‌آیکون، label قابل دسترس را روی خود کنترل هم قرار بده:

<Tooltip content="حذف آیتم">
  <Button aria-label="حذف آیتم" variant="secondary">
    🗑️
  </Button>
</Tooltip>

Data Attributes and Customize CSS

Tooltip hookهای زیر را تولید می‌کند:

Attribute	کاربرد
data-fara-tooltip-wrapper	wrapper اطراف trigger و tooltip
data-fara-tooltip	محتوای Tooltip با role="tooltip"
data-open	روی Tooltip هنگام hover

[data-fara-tooltip-wrapper] {
  position: relative;
}

[data-fara-tooltip][data-open] {
  max-width: 240px;
  white-space: normal;
}

[data-fara-tooltip]:not([data-open]) {
  pointer-events: none;
}

در API فعلی className برای wrapper یا tooltip وجود ندارد؛ برای سفارشی‌سازی از selectorهای data-* استفاده کن. برای نیاز به کنترل state یا positioning پیشرفته، Popover مناسب‌تر است.

Props

Prop	Type	Default	Description
content	ReactNode	-	محتوای توضیح (الزامی)
children	ReactNode	-	عنصری که Tooltip روی آن نمایش داده می‌شود (الزامی)