Seperti pada umumnya bila hanya menggunakankode CSS, maka pembuatan Bubble Tooltips ini jadi lebih mudah. Lihatlah screenshots Bubble Tooltips yang dimaksud dalam tutorial ini.
Cara membuatnya adalah seperti berikut ini :
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">
p {
margin: 15px 0;
padding: 5px;
}
p a {
position: relative;
color: #000;
text-decoration: none;
}
a span {
display: none;
}
a:hover {font-size: 100%;} /* IE/Win requires some link change on hover in order to show the tooltips */
a:hover span { /*the span will display just on :hover state*/
display: block;
position: absolute;
opacity:1.0;
z-index:10;
top: 5px;
left: 40px;
width: 220px;
border: 2px solid #f00;
-moz-border-radius: 0px 8px 0px 8px;
background-color: #ffff00;
color: #f00;
padding: 10px;
font-size: 12px;
}
p.test a }
</style>
p {
margin: 15px 0;
padding: 5px;
}
p a {
position: relative;
color: #000;
text-decoration: none;
}
a span {
display: none;
}
a:hover {font-size: 100%;} /* IE/Win requires some link change on hover in order to show the tooltips */
a:hover span { /*the span will display just on :hover state*/
display: block;
position: absolute;
opacity:1.0;
z-index:10;
top: 5px;
left: 40px;
width: 220px;
border: 2px solid #f00;
-moz-border-radius: 0px 8px 0px 8px;
background-color: #ffff00;
color: #f00;
padding: 10px;
font-size: 12px;
}
p.test a }
</style>
KETERANGAN :
Anda bisa sesuaikan warna border, warna background dan warna teksnya dengan warna yang Anda sukai.
4. Penggunakan kode pada linknya,
awali dengan kode <p class="test"> sebelum link yang Anda miliki.
Contohnya jadi seperti ini :
<p class="test">
<a target="_blank" href="URL link Anda">Judul link<span>Teks kalimat tooltips</span></a></p>
Selamat mencoba, good luck!
0 Comments