Tuesday, January 24, 2017
MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS
MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSS
Setelah cukup lama tidak update dan mumpung ada kesempatan,kali ini saya ingin berbagi pada teman blogger khususnya blogger baru 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.
- <a href="http://activekita.blogspot.com/2010/04/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://i761.photobucket.com/albums/xx252/darma_bucket/gambar10.jpg")no-repeat bottom;
Ganti alamat gambar yang dicetak merah dengan alamat gambar milik sobat.
Contoh hasilnya kurang lebih seperti di bawah ini.
Untuk melihat hasilnya arahkan mouse pada link di bawah.
MEMBUAT TOOLTIP DENGAN MENGGUNAKAN CSSTooltip
Available link for download
