Tooltip

Kurulum

Paket

@bigbang/ui

İçe aktarma

import { Tooltip } from '@bigbang/ui';

Kaynak

Tooltip.tsx

Storybook

Tooltip · Playground

Tooltip, @bigbang/ui paketindedir.

import { Button, Tooltip } from '@bigbang/ui';

<Tooltip content="Değişiklikleri kaydeder ve pencereyi kapatır.">
  <Button variant="secondary">Kaydet</Button>
</Tooltip>;

Özellikler

contentZorunlu

Açıklama

Üzerine gelince ve klavye odağında görünen kısa metin. İçine bağlantı ya da buton koymayın; ulaşılamaz.

Tür

ReactNode

childrenZorunlu

Açıklama

İpucunu gösteren öğe: Button ya da IconButton gibi tek bir odaklanabilir öğe.

Tür

ReactElement

side

Açıklama

İpucunun tetikleyicinin hangi yanında açılacağı; inline-start ve inline-end yazı yönünü izler.

Tür

'top' | 'bottom' | 'inline-start' | 'inline-end'

Varsayılan

'top'

align

Açıklama

O yan boyunca hizalama.

Tür

'start' | 'center' | 'end'

Varsayılan

'center'

delay

Açıklama

İpucu açılmadan önceki üzerine gelme süresi (ms). Varsayılanı motion.tooltip.delay token'ıdır (400 ms); klavye odağı hemen açar.

Tür

number

Varsayılan

400

describes

Açıklama

Açıkken ipucunu tetikleyiciye aria-describedby ile bağlar. İçerik tetikleyicinin adını tekrarlıyorsa, IconButton'da olduğu gibi kapatın.

Tür

boolean

Varsayılan

true

onOpenChange

Açıklama

Üzerine gelme, odak, Escape ve dışarı tıklamada yeni açık durumla çağrılır.

Tür

(open: boolean) => void

disabled

Açıklama

İpucunu hiç açmaz; tetikleyici çalışmaya devam eder.

Tür

boolean

Varsayılan

false

Veri öznitelikleri

• data-component="tooltip": açılır kutu üzerinde.
• data-part: popup, arrow.
• data-side, data-open, data-starting-style, data-ending-style: Base UI’dan.