Cara Membuat Bubble Tooltips Dengan CSS Seri 1 - Sharing Ilmu Pengetahuan | Ianhacks
Headlines News :
Home » , » Cara Membuat Bubble Tooltips Dengan CSS Seri 1

Cara Membuat Bubble Tooltips Dengan CSS Seri 1

Written By Rian on 8.09.2012 | Thursday, August 09, 2012

Jalan-jalan menelusuri gemerlapnya dunet (dunia internet) tidak sia-sia. Buktinya pada hari ini Saya dapat " berbagi " kepada Sobat semua tentang Cara Membuat Bubble Tooltips Dengan CSS yang pembuatannya sangat simpel seperti pada umumnya bila kita menggunakan kode CSS. Sebelumnya, seperti biasa blog ini selalu menusahakan setiap tutorialnya disertai dengan contohnya. Tujuannya hanya satu agar tutorial ini benar adanya dan Anda bisa melihat terlebih dahulu sebelum membuatnya. Sorot atau arahkanlah cursor Anda pada link-link yang ada di blog ane :

Untuk membuatnya, langkahnya sebagai berikut :

1. Pertama masuk ke Edit HTML.
2. Carilah tag </head>
3. Letakkan di atas tag </head> ini
kode css berikut lalu simpan template Anda.

<style type="text/css">
body{font: 14px Arial,sans-serif; background: transparent; color: #333333}
div#container{width: 500px; margin:0 auto}
h1{ color: #F60; margin: 1em 0 0; letter-spacing: -2px; }
p{margin: 0 0 1.7em; }

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://lh6.googleusercontent.com/-QpwSl7Nf0hg/Ti0E1rcSktI/AAAAAAAABmc/jN3UNI6gpgc/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://lh3.googleusercontent.com/-PLhFbVRj1qg/Ti0E16aiTFI/AAAAAAAABmY/2pZn8hYLMB4/bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://lh6.googleusercontent.com/-QpwSl7Nf0hg/Ti0E1rcSktI/AAAAAAAABmc/jN3UNI6gpgc/bubble.gif) no-repeat bottom;
}
</style>


4. Penggunakan kode pada linknya, sisipkan
kode class="tt", class="tooltip", class="top",
class="middle" dan class="bottom"
pada setiap link Anda.

Contohnya seperti ini :


<a href="URL Anda di sini" class="tt">Keterangan link<span class="tooltip"><span class="top"></span><span class="middle">Teks tooltipsnya di sini</span><span class="bottom"></span></span></a>



Selamat mencoba, good luck!


x_3bfae512
Share this article :

1 comment:

  1. Mksih gan buat tutor nya ...
    Sangat bermanfaat ^^.

    ReplyDelete

 
Support : Proudly powered by Blogger
Copyright © 2011. Sharing Ilmu Pengetahuan | Ianhacks - All Rights Reserved
Original Design by Creating Website Modified by IanBlack