Atribut title memberi keterangan tambahan pada elemen dalam bentuk tooltip — kotak teks kecil yang muncul saat pointer tetap berada di atas elemen beberapa saat. Karena title termasuk global attributes, atribut ini sah dipakai pada elemen apa pun.

Tooltip tampak praktis, tetapi memiliki batas serius: tidak semua pengguna bisa mengaksesnya. Chapter ini membahas kapan title tepat dipakai dan kapan informasi sebaiknya ditampilkan sebagai teks biasa.

Efek di Browser #

Browser menampilkan nilai title sebagai tooltip setelah pointer berhenti beberapa saat di atas elemen:

html 
<p>Stok <span title="Diperbarui setiap Senin pagi">kopi arabika</span> tersedia.</p>

Hasil Render: frasa “kopi arabika” tampil sebagai teks biasa di dalam kalimat. Saat pointer pengguna berhenti di atas frasa tersebut, tooltip bertuliskan “Diperbarui setiap Senin pagi” muncul di dekatnya; begitu pointer bergeser, tooltip menutup.

Mari kita telaah baris di atas:

  1. Baris 1 (title="Diperbarui setiap Senin pagi"): keterangan tambahan yang menempel pada frasa.
  2. Baris 1 (span): elemen pembungkus tanpa makna khusus — dipakai semata agar atribut menempel pada frasa, bukan seluruh paragraf.

Pasangan Klasik: abbr #

Pemakaian title yang paling dikenal adalah pada elemen singkatan:

html 
<p>Siti menulis markup dengan <abbr title="HyperText Markup Language">HTML</abbr>.</p>

Frasa “HTML” tampil normal di dalam kalimat; tooltip menjelaskan kepanjangannya saat pointer berhenti di atasnya. Pembaca layar pada umumnya juga memakai nilai title pada abbr untuk membacakan kepanjangan singkatan. Pemakaian abbr dibahas tuntas pada chapter abbr di Section text-dan-semantics.

Batas-batas Tooltip #

Tooltip bukan tempat informasi penting karena empat hal berikut:

  • Tidak terjangkau lewat keyboard — tooltip muncul saat pointer berhenti; pengguna yang menavigasi dengan tombol Tab tidak mendapat jaminan tooltip muncul.
  • Tidak ada di perangkat sentuh — layar sentuh tidak punya hover, sehingga tooltip nyaris tak pernah muncul.
  • Muncul setelah jeda — jeda beberapa saat sebelum tooltip tampil membuatnya terlalu lambat untuk informasi yang harus segera terbaca.
  • Teks polos dan mudah terpotong — tooltip tidak bisa diformat dan bila panjang, sebagian teksnya bisa terpotong di tepi layar.

Ringkasan #

  • title menampilkan tooltip saat pointer berhenti di atas elemen.
  • Pemakaian yang tepat: keterangan tambahan, penjelas singkatan pada abbr.
  • Tooltip tidak terjangkau keyboard dan perangkat sentuh, muncul dengan jeda, dan tidak bisa diformat.
  • Informasi penting harus tampil sebagai teks, bukan hanya di title.

Chapter berikutnya membahas atribut hidden — cara menyembunyikan elemen yang belum relevan.