Components · Popover / Menu / Tooltip

Popover, Menu & Tooltip

Anchor'a tutunan üç farklı yüzey. Tooltip: tek satır açıklama, hover ile çıkar. Menu: tıklanabilir aksiyon listesi, klavyeyle gezilir. Popover: zengin içerik (form, hızlı bilgi), tıklayarak açılır. Üçü de aynı anchor'a yapışır ama yaşam süreleri ve etkileşim modelleri farklıdır.

01 · Tooltip vs Popover vs Menu — yan yana

Tooltip · hover

Sipariş detayı

Popover · click

Aktif filtreler

"VIP" etiketi · son 7 gün. Yeni filtre eklemek için ilgili sütunun üstüne tıkla.

Tümünü temizleYardım

Menu · row actions

02 · Menu — gruplar, seçili durum, alt menü

Sıralama menüsü · seçili öğe

Hızlı popover · 1 alanlı form

Etiket ekle

Vegan Yeni müşteri Şikayet

İptalEkle

Karar matrisi

· Tooltip: tek cümle açıklama, sadece hover/focus, klavyeyle "okunmaz" — bilgi mutlak değil. Asla aksiyon içermez.
· Menu: 3-12 aksiyon listesi. Klavyeyle ↑↓ gezilir, ⏎ tetikler. Submenu max 1 seviye derin.
· Popover: zengin içerik — kısa form, mini grafik, açıklama bloğu. Modal'dan farkı: blocking değil, dış tıkla kapanır.
· Konum: anchor'ın altında default (8px gap); viewport sınırına yaklaşırsa otomatik üstte / yanda açılır (auto-flip).
· Tooltip 4-6 kelime (≤40 karakter); aşılırsa popover'a yükselt.
· Z-index --nb-z-popover (70). Modal içindeki popover --nb-z-popover-on-modal (110)'a çıkar.
· Animasyon: scale .96 → 1 + opacity 0 → 1, 120ms cubic-bezier; üstte kayma yok (popover anchor'a sabitli).
· Erişilebilirlik: tooltip aria-describedby; menu role="menu" + menuitem; popover role="dialog" (form içeriyorsa) ya da region. Esc her üçünü kapatır.
· Yasak: tooltip içinde link, menu öğesi içinde 2 satır metin, popover içinde uzun form (drawer/modal'a geç).