Membuat Tooltip dengan CSS Pseudo-Element

Tooltip dengan CSS3

Toooltip. Secara umum dapat dibuat dengan cara menyisipkan atribut title='' pada elemen seperti ini:

<a href='http://latitudu.blogspot.com' title='Saya adalah tooltip'>Saya memiliki tooltip</a>

Namun di sini Saya hanya ingin memberikan pengetahuan bahwa tooltip juga sebenarnya dapat diperbaiki tampilannya hanya dengan bermodalkan CSS Pseudo-Element:

Lihat Demo

Berikut ini adalah kode CSS untuk memproduksi tooltip dari atribut title:

*[title]:before {
  content:attr(title);
  position:absolute;
  z-index:10;
  width:auto;
  bottom:100%;
  left:0;
  margin-bottom:3px;
  background:#000;
  color:#fff;
  font-size:11px;
  font-weight:normal;
  text-shadow:none;
  padding:4px 10px 5px;
  opacity:0.8;
  filter:alpha(opacity=80);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

*[title]:hover {position:relative;}

*[title]:hover:before {
  display:block;
}

Selektor *[title]:before akan menyeleksi semua elemen yang mengandung atribut title='' di dalamnya, kemudian akan menyisipkan sebuah elemen palsu yang berisikan nilai dari atribut title='' tersebut (dalam hal ini, kode yang dimaksud adalah content:attr(title)). Namun, deklarasi display:none; akan menyembunyikan wujud elemen palsu tersebut, hingga pada akhirnya pointer diletakkan di atas elemen yang mengandung atribut title='' tersebut, barulah elemen palsu akan ditampilkan (display:block;).

Untuk tingkatan lebih lanjut, CSS ini sebenarnya juga bisa digunakan untuk menampilkan isi dari atribut lain, misalnya href=''. Caranya cukup dengan mengganti semua selektor atribut title dan nilai content dengan href seperti ini:

*[href]:before {
  content:attr(href);
  position:absolute;
  z-index:10;
  width:auto;
  bottom:100%;
  left:0;
  margin-bottom:3px;
  background:#000;
  color:#fff;
  font-size:11px;
  font-weight:normal;
  text-shadow:none;
  padding:4px 10px 5px;
  opacity:0.8;
  filter:alpha(opacity=80);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:none;
}

*[href]:hover {position:relative;}

*[href]:hover:before {
  display:block;
}

Jika kode di atas yang diterapkan, maka tooltip yang ditampilkan adalah berupa alamat URL. Ini jika kamu menghendaki alamat URL yang dimunculkan sebagai tooltip, bukannya nilai dari atribut title='' seperti pada umumnya.