Tooltip

Hover'da kısa bir gecikmeyle, focus'ta hemen görünen kısa bir etiket.

Import

tsx

import { Tooltip } from "@merid/react";

<Tooltip content="Linki panoya kopyalar">
<IconButton label="Linki kopyala" icon={<CopyIcon />} variant="secondary" />
</Tooltip>

Tooltip tek bir component'tir. Child'ı, ref'ini ileten tek bir focus alabilir eleman olmalıdır; örneğin Button ya da IconButton. Tooltip bu elemana aria-describedby'ı, işaretçi ve focus handler'larını ekler.

tsx

<Tooltip content="…">
  <Button />
</Tooltip>

Örnekler

Konum

<Tooltip content="Üstte" placement="top"><Button variant="secondary" size="sm">top</Button></Tooltip>
<Tooltip content="Sağda" placement="right"><Button variant="secondary" size="sm">right</Button></Tooltip>
<Tooltip content="Altta" placement="bottom"><Button variant="secondary" size="sm">bottom</Button></Tooltip>
<Tooltip content="Solda" placement="left"><Button variant="secondary" size="sm">left</Button></Tooltip>

Gecikme ve devre dışı

tsx

<Tooltip content="Kaydedildi" delay={0}>…</Tooltip>
<Tooltip content="Çevrimdışıyken kullanılamaz" disabled={isOnline}>…</Tooltip>

API referansı

Prop	Tip	Varsayılan	Açıklama
`content`Zorunlu	`ReactNode`	–	Tooltip metni. Kısa ve etkileşimsiz tut.
`children`Zorunlu	`ReactElement`	–	Tek bir focus alabilir eleman (örneğin ikonlu bir Button). aria-describedby bu elemana eklenir.
`open`	`boolean`	–	Controlled açık state'i.
`defaultOpen`	`boolean`	`false`	Uncontrolled kullanımda başlangıçtaki açık state.
`onOpenChange`	`(open: boolean) => void`	–	Açık state'in değişmesi gerektiğinde çağrılır.
`delay`	`number`	`400`	Hover'da açılmadan önceki gecikme, ms cinsinden. Focus hemen açar.
`placement`	`Placement`	`"top"`	Tercih edilen konum.
`sideOffset`	`number`	`6`	Tetikleyiciye olan uzaklık, px cinsinden.
`className`	`string`	–	Tooltip balonuna verilen sınıf adı.
`disabled`	`boolean`	`false`	Tooltip'i göstermez.
`container`	`Element \| null`	`document.body`	Portal hedefi. `undefined` `document.body` kullanır; `null` hedef oluşana kadar hiçbir şey render'lamaz.

Stil verme

.mrd-tooltip balonun kendisidir: --mrd-tooltip-bg / --mrd-tooltip-fg, --mrd-radius-sm, --mrd-shadow-lg, en fazla 280px genişlik, z-index: var(--mrd-z-tooltip). Üzerinde data-state="open" ve pointer-events: none bulunur.

Erişilebilirlik

WAI-ARIA Tooltip desenini izler. Balonun role="tooltip" rolü vardır ve açıkken tetikleyiciye aria-describedby ile bağlanır. Dokunmatik işaretçiler onu açmaz; bu yüzden temel bir bilgiyi asla yalnızca tooltip'e koyma. Yalnızca ikon içeren bir tetikleyicinin yine de kendi erişilebilir adı olmalıdır (IconButton'ın label'ı).

Tuş	Ne yapar
`Tab`	Tetikleyici focus alınca tooltip hemen görünür; focus ayrılınca gizlenir.
`Esc`	Tooltip'i gizler.

Kullanım ilkeleri

Yap

Yalnızca ikon içeren bir kontrole ad vermek ya da kısa bir ipucu eklemek için tooltip kullan.

Kaçın

Tooltip'e link, buton ya da uzun metin koymak; bunun için Popover kullan.

İlgili sayfalar

Etkileşimli içerik için Popover.
IconButton