Mecha versi 2.6.4 sudah dirilis!

Membuat Tooltip dengan CSS Pseudo-Element

CSS Tooltip
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.

5 Komentar

Unknown

Wah info bagusi ni ..
kebetulan CSS memang kesukaan saya ..

Anonim

Wah menarik nih gan ,..
Btw tapi knpa tooltip bawaan masih muncul yaa . yang warna putih gan .. -__-
Solusi nya yaa ...

Taufik Nurrohman

Pakai atribut HTML5 data-*. Pakai nama data-title saja supaya mudah diingat:

<a href="#" data-title="Saya adalah tooltip!">Teks Tautan</a>

Nantinya, teks tooltip akan diambil dari atribut data-title, jadinya seperti ini:

*[data-title]:before {
content:attr(data-title);
position:absolute;
bottom:100%;
left:0;
z-index:10;
margin-bottom:3px;
background-color:black;
color:white;
font-size:11px;
font-weight:normal;
text-shadow:none;
padding:4px 10px 5px;
width:auto;
white-space:nowrap;
display:none;
}
*[data-title]:hover {position:relative}
*[data-title]:hover:before {display:block}

IRIL SAGITA

Kak, jika ingin menambahkan efek transisi gimana caranya ?

Taufik Nurrohman

Ganti properti display dengan visibility dan opacity:

body {padding-top:50px}
a[title] {position:relative}
a[title]:before {
content:attr(title);
position:absolute;
z-index:10;
width:auto;
bottom:100%;
left:0;
margin-bottom:10px;
background:#000;
color:#fff;
font-size:11px;
font-weight:normal;
text-shadow:none;
padding:4px 10px 5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-transition:all .4s;
-moz-transition:all .4s;
-ms-transition:all .4s;
-o-transition:all .4s;
transition:all .4s;
visibility:hidden;
opacity:0;
}
*[title]:hover:before {
margin-bottom:3px;
visibility:visible;
opacity:.8;
}

Demo: Pure CSS Tooltip

Komentar telah ditutup.