Cara Membuat Bubble Tooltips Dengan CSS Seri 2

Seperti pada umumnya bila hanya menggunakan
kode 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!