Cara membuat ToolTips yang Super Beautifull dengan CSS

Sobat, kali ini kita akan mencoba membuat sebuah tooltips dengan penampilan yang sungguh menarik. Tooltips yaitu sebuah teks penjelas tentang suatu objek. Misalnya ketika sebuah link kita sorot dengan mouse pointer, maka akan muncul sebuah pesan. NAh pesan inilah yang disebut sebagai tooltips. 

Sekarang bagaimana cara kita membuat sebuah tooltips yang memiliki penampilan yang menarik ?
Jauh dari tooltips yang pada umumnya kita buat. Secara umum untuk membuat tooltips kita menggunakan sebuah atribut title untuk membuatnya. Kali ini kita akan membuatnya dengan teknik baru. 

Untuk itu, jangan kemana-mana, lanjutkan saja membaca dan simak dengan seksama karena saya tidak akan menjelaskan sedetail nya. Nanti sobat bisa pahami sendiri pelan-pelan .

Sekarang coba tuliskan kode berikut : Oya, ini hanyalah penggalan kode pentingnya saja.

<style>

    a[data-tooltip]:link, a[data-tooltip]:visited {

position: relative;

text-decoration: none;

border-bottom: solid 1px;

}




a[data-tooltip]:before {

content: "";

position: absolute;

border-top: 20px solid #0090ff;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

visibility: hidden;

top: -18px;

left: -26px;

}




a[data-tooltip]:after {

content: attr(data-tooltip);

position: absolute;

color: white;

top: -35px;

left: -26px;

background: #0090ff;

padding: 5px 15px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

white-space: nowrap;

visibility: hidden;

}




a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {

visibility: visible;

-moz-transition: visibility 0s linear .3s;

}

</style>




<p >

Ini merupakan contoh bagaimana cara membuat sebuah tooltips dengan cara baru. Tooltips dengan tampilan yang menawan. Silahkan sorot link ini untuk melihat hasilnya.

</p>

Sebagai Hasil yang sudah jadi, coba silahkan sorot link yang ada di bawah ini :

Ini merupakan contoh bagaimana cara membuat sebuah tooltips dengan cara baru. Tooltips dengan tampilan yang menawan. Silahkan sorot link ini untuk melihat hasilnya.