Membuat Tooltip dengan CSS Pseudo-Element
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:
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 namadata-title
saja supaya mudah diingat:Nantinya, teks tooltip akan diambil dari atribut
data-title
, jadinya seperti ini:IRIL SAGITA
Kak, jika ingin menambahkan efek transisi gimana caranya ?
Taufik Nurrohman
Ganti properti
display
denganvisibility
danopacity
:Demo: Pure CSS Tooltip