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 mengubah warna border, warna background dan warna teksnya
dengan warna yang Anda inginkan sesuai selera Anda masing-masing.

4.   Penggunakan kode pada linknya, awali dengan kode <p class="test">
      sebelum link yang Anda ingin berikan tooltips model ini.

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!