Geri bildirim · Popover

Açılır bilgi

Bir düğmeye basınca açılan küçük panel. İpucundan farkı: dokunmayla çalışır ve bağlantı taşıyabilir.

CSS: kararlı
JavaScript: aç ve kapat
React: kararlı
Vue: kararlı

Örnekler

Alan yanında Canlı örnek

HTML kodunu göster

<div class="trds-acilir-bilgi" data-trds="acilir-bilgi">
  <button class="trds-acilir-bilgi__dugme" type="button" aria-expanded="false" aria-controls="ab-1"><svg class="trds-simge" aria-hidden="true"><use href="#edk-question23"/></svg><span class="trds-gorsel-gizli">Vergi kimlik numarası nedir?</span></button>
  <div class="trds-acilir-bilgi__panel" id="ab-1" role="region" aria-live="polite" hidden>
    <p class="trds-govde">10 haneli numara. Vergi levhanızda ve <a class="trds-link" href="#">Dijital Vergi Dairesi</a>’nde yazar.</p>
    <button class="trds-button trds-button--ikincil trds-button--kucuk" type="button" data-trds-kapat>Kapat</button>
  </div>
</div>

Ne zaman kullanılır

Bir alanın yanında "Bu nedir?" sorusu için kullanın.
Uzun metin için kullanmayın. Ayrıntılar bileşeni vardır.

Erişilebilirlik

Düğme aria-expanded ve aria-controls taşır. Panel açılınca odak düğmede kalır.
Escape, dışarı tıklama ve kapat düğmesi kapatır. Panel aria-live="polite" ile duyurulur.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: NO, IE, IT, NL, CH.