Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



SEXY TOOLTIP DENGAN CSS3
June 23, 2010
Posted by: Fauzie


Tooltip ialah salah satu mekanisma untuk memberi “extra details” selain apa yang kita dapat lihat dalam web page. Ia nampak mudah tetapi efektif dalam penggunaannya.

Kebanyakan tooltip dibina dengan menggunakan JavaScript seperti jQuery. Teknik ini mungkin sesuai kepada yang memahaminya tetapi tidak kepada kita yang rata-rata tidak tahu apa itu JavaScript.

Untuk tutorial ini, jom kita lihat bagaimana tooltip boleh dibina hanya dengan menggunakan CSS "pure CSS"sahaja tetapi masih dapat memberi impak yang menarik.

Demonstrasi Sexy Tooltip

Di bawah ini adalah “Live Demo” tooltip yang hanya mengunakan “pure CSS”. Sila hover mouse anda ke atas perkataan-perkataan yang bergaris.

"Live Demo"
Ini ialah contoh-contoh Tooltip KlasikIni adalah salah satu contoh tooltip yang dibuat dengan menggunakan CSS sahaja. Dengan kreativiti yang ada, anda boleh lakukannya!, KritikalErrorKritikalIni adalah salah satu contoh tooltip yang dibuat dengan menggunakan CSS sahaja. Dengan kreativiti yang ada, anda boleh lakukannya!, BantuanHelpBantuanIni adalah salah satu contoh tooltip yang dibuat dengan menggunakan CSS sahaja. Dengan kreativiti yang ada, anda boleh lakukannya!, MaklumatInformationMaklumatIni adalah salah satu contoh tooltip yang dibuat dengan menggunakan CSS sahaja. Dengan kreativiti yang ada, anda boleh lakukannya! dan AmaranWarningAmaranIni adalah salah satu contoh tooltip yang dibuat dengan menggunakan CSS sahaja. Dengan kreativiti yang ada, anda boleh lakukannya! yang dibina dengan menggunakan CSS. Ini hanyalah contoh. Dengan kreativiti yang ada, anda mampu membuatnya untuk kegunaan blog atau web page anda!


“Boxy” popup mempunyai bayang-bayang terjadi dengan memperkenalkan “simple extra codes” seperti border-radius property dan box-shadow property. Dan ikon yang terdapat disudut kotak sebelah atas ialah image yang telah di upload.

Mekanisma tooltip dalam contoh ini sesuai untuk semua browser dan anda boleh membuat “tweak” atau perubahan untuk kesesuaian anda.

Asas Stail CSS Untuk ".tooltip Class"

Ini kod asas CSS untuk memberi stail kepada tooltip yang dibina:

.tooltip {
border-bottom: 1px dotted #000000;
color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}

CSS Untuk Menunjukkan Tooltip

Di bawah ini pula adalah kod-kod CSS untuk memberi stail kepada tooltip yang di "hover":

.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;
}

Jika anda perhatikan kod di atas terdapat kod * html a:hover yang dipanggil HTML Star hack. Ini hanya hack untuk IE6.

CSS untuk mewarnakan tooltip

Di bawah ini ialah skim warna background untuk disesuaikan dengan ikon (image):

.classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

CSS tambahan untuk browser moden

Kod-kod ini untuk membulatkan bucu dan memberi efek bayang-bayang

border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Di bawah ini adalah kod-kod CSS dan HTML sepenuhnya

<html>
<head>
<style type="text/css">
.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 {
border-radius: 5px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
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;
}
.critical {
background: #FFCCAA;
border: 1px solid #FF3334;
}
.help {
background: #9FDAEE;
border: 1px solid #2BB0D7;
}
.info {
background: #9FDAEE;
border: 1px solid #2BB0D7;
}
.warning {
background: #FFFFAA;
border: 1px solid #FFAD33;
}
</style>
</head>
<body>
Ini ialah contoh-contoh Tooltip <a class="tooltip" href="#">Klasik<span
class="classic">Ini adalah salah satu contoh tooltip yang dibuat dengan
menggunakan CSS sahaja. Dengan kreativiti yang ada, anda boleh lakukannya!
</span></a>, <a class="tooltip" href="#">Kritikal<span class="custom
critical"><img src="http://downloads.sixrevisions.com/css-
tooltips/Critical.png " alt="Error" height="48" width="48"
/><em>Kritikal</em>Ini adalah salah satu contoh tooltip yang dibuat dengan
menggunakan CSS sahaja. Dengan kreativiti yang ada, anda boleh lakukannya!
</span></a>, <a class="tooltip" href="#">Bantuan<span class="custom
help"><img src="http://downloads.sixrevisions.com/css-tooltips/Help.png "
alt="Help" height="48" width="48" /><em>Bantuan</em>Ini adalah salah satu
contoh tooltip yang dibuat dengan menggunakan CSS sahaja. Dengan kreativiti
yang ada, anda boleh lakukannya!</span></a>, <a class="tooltip"
href="#">Maklumat<span class="custom info"><img src="
http://downloads.sixrevisions.com/css-tooltips/Info.png" alt="Information"
height="48" width="48" /><em>Maklumat</em>Ini adalah salah satu contoh
tooltip yang dibuat dengan menggunakan CSS sahaja. Dengan kreativiti yang
ada, anda boleh lakukannya!</span></a> and <a class="tooltip"
href="#">Amaran<span class="custom warning"><img
src="http://downloads.sixrevisions.com/css-tooltips/Warning.png "
alt="Warning" height="48" width="48" /><em>Amaran</em>Ini adalah salah satu
contoh tooltip yang dibuat dengan menggunakan CSS sahaja. Dengan kreativiti
yang ada, anda boleh lakukannya!</span></a> yang dibina dengan menggunakan
CSS. Ini hanyalah contoh. Dengan kreativiti yang ada, anda mampu membuatnya
untuk kegunaan blog atau web page anda!
</body>
</html>