nili/ui
enfaartr
Tüm bileşenler

Tooltip

Genel görünüm
13 export9 varyant ekseni26 prop4 dosya
import { Tooltip, TooltipAlign, TooltipPlacement, TooltipSide } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Boyutlar

Üç baloncuk boyutu. Tetikleyici odaklanabilir olmalı — düz bir span üzerindeki ipucu klavye kullanıcılarına görünmez, bu yüzden metni bir düğmeye sarın.

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

Yönler ve hizalama

side mantıksaldır: start ve end okuma yönünü izler. top ve bottom ayrıca bir align alır; start ve end almaz ve tür bunu, hiçbir işe yaramayan bir prop’u kabul etmek yerine ifade edilemez kılar.

yönler
hizalama (yalnızca 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" />
    </>
  )
}

Açık baloncuk, ok ve öndeki simge

Bir ipucu, üzerinde durduğu yüzeye göre terstir; bu yüzden darkMode tema kararı değil, ipucu başına bir seçimdir. Varsayılan açıktır — açık bir sayfadaki koyu baloncuk.

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

Gecikme ve kapatma

delay baloncuğu üzerine gelmede geciktirir; odak onu her zaman hemen açar. Büyük ipucu bir kapatma düğmesi taşıyabilir — bunu okuyucunun biraz vakit ayırması gereken içerik için saklayın.

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