Membuat Tag <abbr> Berguna di Perangkat Bergerak

html, javascript

Singkatan atau dalam bahasa Inggris abbreviation merupakan hal yang sangat lazim digunakan dalam suatu tulisan untuk menghemat area tulis.

Di media web, ada tag khusus untuk menangani singkatan ini. Tag <abbr> memungkinkan kita memberi kepanjangan dari suatu singkatan. Kepanjangan kata akan muncul ketika tag tersebut kita sorot.

Sayangnya, user experience ini tidak dapat ditemui di peramban (browser) perangkat bergerak (mobile).

Berikut adalah tips untuk membuat tag <abbr> ini bekerja sesuai fungsi (menampilkan kepanjangan) semestinya di semua peramban.

$(document).ready(function () {
  $('abbr').click(function () {
    let e = $(this);
    let title = e.attr('title') || undefined;
    if (title === undefined) return;
    e.attr('title', e.text());
    e.text(title);
  });
});

Di atas adalah perintah JavaScript yang ditulis menggunakan jQuery untuk menampilkan kepanjangan dari singkatan ketika diklik seperti berikut ini.

Faktanya, HTML dan CSS banyak dikuasai dengan cara otodidak.

Semoga bermanfaat!