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>
    </>
  )
}