Tooltip

Keterangan muncul saat disorot atau difokus keyboard. Pakai hanya untuk pelengkap — jangan menaruh informasi penting di dalamnya.

Tooltip di atas tombol ikon

Muncul juga saat fokus lewat Tab, jadi pengguna keyboard tidak ketinggalan.

Lihat kode

<div class="ck-row ck-row-4 ck-wrap">
  <span class="ck-tooltip">
    <button class="ck-btn ck-btn--outline ck-btn--icon" aria-label="Acak soal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg></button>
    <span class="ck-tooltip__bubble" role="tooltip">Acak urutan soal</span>
  </span>
  <span class="ck-tooltip">
    <button class="ck-btn ck-btn--outline ck-btn--icon" aria-label="Ekspor"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg></button>
    <span class="ck-tooltip__bubble" role="tooltip">Ekspor ke Excel</span>
  </span>
  <span class="ck-tooltip">
    <button class="ck-btn ck-btn--outline ck-btn--icon" aria-label="Duplikat"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect width="14" height="14" x="8" y="8" rx="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button>
    <span class="ck-tooltip__bubble" role="tooltip">Duplikat kuis</span>
  </span>
</div>