Membuat link tooltip pada posting

Kali ini kita akan membuat link tooltip dengan cara sederhana dengan menambahkan kode CSS ke dalam postingan.

Kegunaanya dapat beraneka ragam sesuai kebutuhan masing-masing. Jika ada yang ingin menambahkan maksud dari suatu kalimat, maka tooltip ini bisa membantu menjelaskan dengan tampilan yang lumayan keren.

Bagaimana hayo, kita mulai saja ya...

Untuk kode css nya :

<style>
/* Code Style CSS
by ycusoy
site (http://admin-belajar.blogspot.com) */
a.codestyle {position: relative;}
a.codestyle span {display: none;position: absolute;top: 20px;left: -10px;width: 300px;padding: 5px;z-index: 100;background: #000;color: #fff;font-size:11px;-moz-border-radius: 5px; /* this works only in camino/firefox */ -webkit-border-radius: 5px; /* this is just for Safari */}
a:hover.codestyle {font-size: 99%; /* this is just for IE */}
a:hover.codestyle span {display: block;}
</style>

Nah singkat bukan code css-nya..

Sekarang kita lanjut dengan bagaimana menempatkan tooltip tersebut pada beberapa kata atau kalimat dalam postingan..

kode :

<a href="#" class="codestyle">KALIMAT<span>DI SINI ISI TOOLTIP KAMU</span></a>

* KALIMAT ganti dengan Kalimat yang akan kamu buatkan tooltipnya
* DI SINI ISI TOOLTIP KAMU ganti dengan isi tooltip kamu

Contoh Kalimat :

Kali ini kita akan membuat link tooltipKegunaanya dapat beraneka ragam sesuai kebutuhan masing-masing. Jika ada yang ingin menambahkan maksud dari suatu kalimat, maka tooltip ini bisa membantu menjelaskan dengan tampilan yang lumayan keren. dengan cara sederhana dengan menambahkan kode CSS ke dalam postingan.

Bagaimana?? Mudah bukan...