Geri bildirim · Tooltip

İpucu

Bir düğme veya simge için kısa bir açıklama gösterir. Odak veya işaretçi ile açılır.

CSS: kararlı
JavaScript: göster ve gizle
React: kararlı
Vue: kararlı

Örnekler

Simge düğmesi Canlı örnek

HTML kodunu göster

<span class="kiris-ipucu-kap" data-kiris="ipucu">
  <button class="kiris-button kiris-button--ikincil" type="button" aria-describedby="ipucu-yazdir">Yazdır</button>
  <span class="kiris-ipucu" id="ipucu-yazdir" role="tooltip" hidden>Bu sayfayı yazıcıya gönderir</span>
</span>

Ne zaman kullanılır

Yalnız simgeden oluşan bir düğmeye ad vermek için kullanın.
Zorunlu bilgi için kullanmayın. Dokunmatik ekranda ipucu güvenilir değildir. Yardım metni kullanın.
İçinde bağlantı veya düğme olmaz.

Erişilebilirlik

Tetikleyici aria-describedby ile ipucuna bağlıdır. Ekran okuyucu düğmeyle birlikte okur.
Klavye odağı ile açılır, Escape ile kapanır. Yalnız işaretçiye bağlı değildir.
İşaretçi ipucunun üstüne geçince ipucu kapanmaz. WCAG 1.4.13.

Karşılanan WCAG 2.2 ölçütleri 1.4.13 2.1.1 4.1.2

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, FR, IE, KR, DK, NO.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-tooltip ile başlayan sınıflar
Davranış betiği, data-kiris="ipucu" başlatıcısı