nili/ui
enfaartr
كل المكوّنات

Tooltip

عرض شامل
١٣ تصدير٩ محور تنويع٢٦ خاصيّة٤ ملف
import { Tooltip, TooltipAlign, TooltipPlacement, TooltipSide } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

الأحجام

ثلاثة أحجام للفقاعة. ويجب أن يكون المُشغِّل قابلًا للتركيز — فالتلميح على span عادي غير مرئي لمستخدمي لوحة المفاتيح، لذا لُفّ النص بزر.

import { Tooltip, Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Tooltip size="2xs" content={t('copyLink')}>
        <Button appearance="stroke">2X-Small</Button>
      </Tooltip>
      <Tooltip size="xs" content={t('copyLink')}>
        <Button appearance="stroke">X-Small</Button>
      </Tooltip>
      <Tooltip size="lg" content="Copy link" description="Anyone with the link can view.">
        <Button appearance="stroke">Large</Button>
      </Tooltip>
    </>
  )
}

الجهات والمحاذاة

side منطقي: فـstart وend يتبعان اتجاه القراءة. ويأخذ top وbottom محاذاة align أيضًا، بخلاف start وend — والنوع يجعل ذلك غير قابل للتمثيل بدل قبول خاصية لا تفعل شيئًا.

الجهات
المحاذاة (لـ top وbottom فقط)
import { Tooltip, Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Tooltip side="top" content="Top" />
      <Tooltip side="bottom" align="start" content="Bottom start" />
      <Tooltip side="start" content="Start" />
      <Tooltip side="end" content="End" />
    </>
  )
}

فقاعة فاتحة وسهم وأيقونة متقدّمة

التلميح معكوس مقابل سطحه، فـdarkMode خيار لكل تلميح لا قرار سمة. وهو مفعّل افتراضيًا — الفقاعة الداكنة على صفحة فاتحة.

import { Tooltip, CompactButton, Icon } from "@nili/ui"
import { RiInformationLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <Tooltip content={t('style.dark')}>
        <CompactButton aria-label="Info"><Icon icon={RiInformationLine} /></CompactButton>
      </Tooltip>

      <Tooltip darkMode={false} content={t('style.light')}>
        <CompactButton aria-label="Info"><Icon icon={RiInformationLine} /></CompactButton>
      </Tooltip>

      <Tooltip arrow={false} content={t('style.noTail')}>
        <CompactButton aria-label="Info"><Icon icon={RiInformationLine} /></CompactButton>
      </Tooltip>

      <Tooltip
        content="With a leading icon"
        startIcon={<Icon icon={RiInformationLine} />}
      >
        <CompactButton aria-label="Info"><Icon icon={RiInformationLine} /></CompactButton>
      </Tooltip>
    </>
  )
}

التأخير والإغلاق

يؤخّر delay الفقاعة عند المرور، أما التركيز فيفتحها فورًا دائمًا. ويمكن للتلميح الكبير أن يحمل زر إغلاق — احتفظ به لمحتوى يحتاج القارئ إلى لحظة معه.

import { Tooltip, Button } from "@nili/ui"

export function Example() {
  return (
    <>
      <Tooltip delay={600} content={t('delay.waited')}>
        <Button appearance="stroke">Slow</Button>
      </Tooltip>

      <Tooltip
        size="lg"
        dismissible
        dismissLabel="Close"
        content="Keyboard shortcuts"
        description="Press ⌘K to open the command palette from anywhere."
      >
        <Button appearance="stroke">{t('delay.dismissible')}</Button>
      </Tooltip>

      <Tooltip disabled content={t('delay.offBody')}>
        <Button appearance="stroke" disabled>Disabled</Button>
      </Tooltip>
    </>
  )
}