.

Membuat tooltip dengan menggunakan css


Membuat tooltip dengan menggunakan css

MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS




Kali ini saya ingin berbagi pada teman blogger khususnya blogger  pemula yang mungkin masih belum tahu bagaimana membuat tooltip dengan menggunakan css. Saya memilih untuk menggunakan tooltip dengan css ini karena menganggap cukup ringan dari pada dengan menggunakan javascript.
Untuk membuatnya sobat bisa menggunakan cara di bawah ini:
  • Seperti biasa login ke blog sobat.
  • Pilh tata letak.
  • Klik edit html.
  • Letakkan kode di bawah ini di atas kode ]]</b:skin>hingga posisinya sbb:

    .tooltip {position:relative;}
    .tooltip span {display:none;}
    .tooltip:hover span {
    display:block;
    position:absolute;
    width:200px;
    left:20px;
    top:20px;
    background-color:#006633;
    border:3px solid #0099FF;
    padding:5px;
    font-size:15px;
    color:#000000;
    text-decoration:none;
    font-family:Verdana,arial, helvetica, sans-serif;}

    ]]></b:skin>
  • Kemudian klik simpan.
CARA MENAMPILKAN KE DALAM POSTINGAN

    <a href="http://vioren-ky.blogspot.com/2012/11/membuat-tooltip-dengan-menggunakan-css.html" class="tooltip"><span>MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS</span>Tooltip</a>

    Ganti link yang dicetak merah dengan link milik sobat.
    Sedang yang berwarna hijau adalah text yang akan keluar,bisa diganti dengan text yang sobat inginkan.

    Jika ingin mengganti background dengan sebuah gambar, maka sobat cukup menganti background-color:#006633; dengan alamat gambar milik sobat.

    Cara menulis kodenya seperti di bawah ini:

    background:url("http://i265.photobucket.com/albums/xx141/vioren_bucket/gambar8.jpg")no-repeat bottom;

    Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.

    Selesai sudah semoga bermanfaat...

0 komentar:

Posting Komentar

> NO ~ Sara, Porno, Hujat, Provokasi, Hargailah Sesama.
> NO ~ Promo ( iklan ), Spam, Link Hidup, Akan Langsung Hilang
> Berkomentar Sesuai Topik Tidak OOT, Agar Kita Semua Bisa Berbagi.