Modifikasi tooltip menggunakan CSS (Cascading style sheets)

Kalo kita perhatikan,sudah banyak sekali Blogger atau diluar sana yang memberikan tutorial modifikasi Tooltip dengan menggunakan plugin javascript tetapi tidak banyak dari mereka menjelaskan apa yang
sebenarnya terjadi di dalam logika tooltip.Dan pada hari ini saya akan mencoba berbagi apa yang telah saya dapatkan sampai saat ini tentang modifikasi tooltip dengan menggunakan CSS3.

Kemajuan CSS memungkinkan kita untuk menghasilkan yang indah dan tampil beda dengan yang lain. Ini adalah salah satu mekanisme yang paling umum untuk menyediakan rincian tambahan di luar apa yang dapat Anda lihat di halaman .Dengan demikian, kita akan melihat bagaimana menggunakan standar CSS yang kini sudah mulai berkembang dapat meningkatkan dan memodifikasi tampilan halaman web dan tooltips yang indah seperti apa yang akan kita bahas pada artikel ini.

Dalam contoh ini, kita akan menghasilkan tooltip murni CSS yang secara estetika mekanismenya ditingkatkan menggunakan CSS3 (dengan maksud untuk mencapai beberapa tujuan yang lebih tinggi).Apakah ini berarti bahwa ia akan bekerja pada browser yang tidak mendukung CSS3 (seperti Internet Explorer 8 dan di bawahnya)?Mekanisme ini tentu saja tetap bekerja,Hanya saja tidak terlihat lebih cantik dan sedikit tidak sesuai dibanding dengan Browser yang telah mendukung CSS3,Konsep ini dikenal sebagai peningkatan progresif pada tampilan akhir.

Modifikasi tooltip dengan berbagai jenis.
Untuk memberikan kesan berbeda,disini saya mencoba memberikan 5 macam keragaman tooltip yang di sesuaikan dengan kondisi dan pesan dari jenis tooltip itu sendiri seperti contoh dengan mengarahkan kursor pada tulisan dibawah ini.

, , , ,and CSS powered tooltip,Ini hanyalah sebagian daripada contoh tutorial kita dalam modifikasi tooltip,dan selebihnya tergantung ide cemerlang anda utk membuat tampilan ini lebih indah!

Yang kita butuhkan hanyalah serangkaian kode CSS untuk bisa menghasilkan kombinasi tooltip seperti diatas. Contoh dari kode CSS itu sendiri bisa anda lihat seperti dibawah ini.

<style type="text/css">

/*tootip*/
.tooltip {
border-bottom: 1px dotted #000000;
color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute;
left: 1em;
top: 2em;
z-index: 99;
margin-left: 0;
width: 250px;
}
.tooltip:hover img {
border: 0;
margin: -10px 0 0 -55px;
float: left;
position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif;
font-size: 1.2em;
font-weight: bold;
display: block;
padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic { background: #FFFFAA; border: 1px solid #FFAD33;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;}
.critical { background: #FFCCAA; border: 1px solid #FF3334;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;}
.help { background: #FF0000; border: 1px solid #993300;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;
}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;}
.warning { background: #FFFFAA; border: 1px solid #FFAD33;
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;
}
.info1 {background: #9FDAEE; border: 1px solid #2BB0D7;border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow:0 0 20px #000;
-webkit-box-shadow:0 0 10px #000;}
</style>

Contoh penulisan tooltip dengan menggunakan class="Custom info" pada postingan.

Kemajuan CSS memungkinkan kita untuk menghasilkan tooltips yang berfungsi sebagai Deskripsi pesan atau informasi singkat dari kata atau kalimat tersebut. yang indah dan tampil beda dengan yang lain.

Kemajuan CSS memungkinkan kita untuk menghasilkan <a class="tooltip" href="#">tooltips<span class="custom info"><img src="http://3.bp.blogspot.com/_VrWujqfSgyA/TR9s_QlMYgI/AAAAAAAAAcI/MHDzagCBAfw/s200/Info.png" alt="Error" height="48" width="48" /><em>Tooltips</em>yang berfungsi sebagai pengganti pesan atau informasi singkat dari kata atau kalimat tersebut.</span></a> yang indah dan tampil beda dengan yang lain.

Semoga bermanfaat.