Cara Membuat Bubble Tooltips Dengan CSS Seri 2

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>

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!