Hover veya focus üzerinde kısa açıklama. Dört yön (top/right/bottom/left), dark default + light surface varyantı, rich içerik (kısayol + alt metin) ve panel kullanım örnekleri.
01 · Pozisyon
Anchor'dan dört yönde uzanır — hover/focus 200ms gecikmeyle açılır
Üstte konumlandı
top
Sağda konumlandı
right
Altta konumlandı
bottom
Solda konumlandı
left
02 · Tema varyantları
Dark default (yüksek kontrast) — light surface yoğun grafik/harita üzerinde tercih edilir
Standart kullanım
Heatmap / harita üzeri
03 · Rich tooltip
Başlık + alt metin + opsiyonel kısayol — komut palet'i veya iconbar'da yer alan eylemler için
Yeni sipariş⌘ N
Boş bir sipariş kartı oluşturur ve müşteri seçimine geçer.
Hazır olarak işaretle⏎
Müşteriye otomatik bildirim gönderir, kuryeyi bilgilendirir.
FiltrelerF
Tarih aralığı, durum ve müşteri etiketine göre filtrele.
04 · Panel kullanımı
Icon button hint, truncate'lenmiş metin tam görünümü, disabled state açıklaması
Icon button hint
CSV olarak indir
Yenile
Görünüm ayarları
Truncate'lenmiş metin
Margerita Pizza · Karadeniz fındıklı tatlı menü kombinasyonu (Aile boy)
Margerita Pizza · Karadeniz fındıklı tatlı menü kombinasyonu (Aile boy)
2x · 370 TL
Disabled state açıklaması
Kuryeye gönder
Kuryeye gönderilemezSipariş henüz "Hazır" durumunda değil. Önce hazırlığı tamamlayın.
— hover ile sebep gösterilir
Yapı kuralları
· Bubble: --tooltip-bg #111827 (light tema), #262626 (dark tema). Light surface varyantı surface + 1px hairline border.
· Tipografi: 12px / 1.4 / weight 500, single-line için white-space: nowrap.
· Padding: kısa 6px 9px, rich 10px 12px. Radius 6px.
· Ok ucu: 8×8 kare, 45° döndürülmüş, anchor merkezine hizalı, bubble'dan 4px taşar.
· Anchor mesafesi: 8px. Hover: 200ms delay açılır, 0ms kapanır. Focus: anında.
· Z-index 5. Modal/drawer içinde 50 kullan.
· Erişilebilirlik: aria-describedby ile bağla; sadece dekoratif metin için kullanma. Klavye focus'unda da görünmeli.
· Yasak: tooltip içine link, buton, form atom'u koyma — etkileşim gerektiren içerik Popover'a gider.
· Maksimum genişlik: rich için 240px. Daha uzun açıklama gerekiyorsa modal veya yardım merkezi.
· Mobilde tooltip kullanılmaz — long-press yerine inline yardım metni veya bottom sheet tercih edilir.