Home » » tooltip sederhana (100% CSS)

tooltip sederhana (100% CSS)



rasa ini udah gak tertahand! (pengend mosting)
..mosting appa yach?
..ini aja dech.
barang kali adda yg seneng.

bikind tooltip ternyata gak sulid loch! apa lagi kalo 100% CSS (tanpa Javascript).
mmm.. tapi, kayaknya cuma buad teks link. coz aku lum nyoba kalo buad yg laend2. hehe..
langsung aja:

1. cari kode ]]></b:skin>
2. coppy kode di bawah, dan taruh sebelum kode tadi:
/*---------- bubble tooltip (by: Mr.K)-----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}

TRUS, klik simpan.
setelah itu.. kalo pengend masukind links, pakai formad di bawah ini:
<a href="link_tujuanmu" class="tt">Teks link yg muncul<span class="tooltip"><span class="top"></span><span class="middle">Pesan yang akan muncul</span><span class="bottom"></span></span></a>

CONTOH: arahkan pointer kesini!Taraaaa.. Kayak gini nich hasilnya. ^^

selesiai dech. smoga bermanfaad.
Share this article :

+ komentar + 19 komentar

Friday, January 08, 2010 9:27:00 PM

salam sobat
trims sudah berbagi ilmu.
saya mau coba juga ,,buat tooltipnya.

Friday, January 08, 2010 9:54:00 PM

Wah...mb malah gak ngerti tentang yang di maksud..tooltip...kayak apa ya bentuknya

Saturday, January 09, 2010 5:50:00 AM

tarimakasih atas ilmunya yah sob:)

salam blogger^^

Saturday, January 09, 2010 3:32:00 PM

oooohhhh....itu yang namanya tooltip ya...bagus ya...tp sayang mb gak bisa edit script html template mb, krn dah di compress, jd posisi kodenya rapat semua...gara2 kmrn load blog mb lama.

Thanks infonya dik Yus

Saturday, January 09, 2010 3:38:00 PM

Ilmune tambah maut ae cah ponorogo situk iki! nice infoh gan!

Saturday, January 09, 2010 9:53:00 PM

@ RifkyMedia
lek cah pasuruan yaopo iki, tak pernah terdengar di dunia perinternetan :)

coba golek nek WP enek plugins koyo iki g yo.. :D

Saturday, January 09, 2010 9:57:00 PM

@bo13ok, saya arek malang gan B-)..hahaha!

kalau saya sih g paham tentang internet gan, blog saya saja sederhana...maklum tak ada yg mau ngajarin saya

Sunday, January 10, 2010 8:26:00 AM

nice gan!!
don forget to visit balik!!

Sunday, January 10, 2010 2:03:00 PM

Template-Q ga da ininya :

]]>

Soalnya versi klasik,,,

Monday, January 11, 2010 3:41:00 PM

Apik je... iku carane buat wordpress gimana ya? izin sekalian mau ngoprek css di atas mau njajal di wp self hosting... *ilmu hack css di jajal*

Monday, January 11, 2010 4:04:00 PM

cie ileeeeh.. sukses maz! moga brhsil!
(aq rung tek mudeng masalah wp) :f:

Monday, January 11, 2010 5:03:00 PM

wah mantab gan tutornya... thx's dh share

Monday, January 11, 2010 9:06:00 PM

Meski masih gratisan, Blognya bagus dan berkelas. Tetap semangat ngeblog mas.

Monday, January 11, 2010 11:17:00 PM

absennnnnnnnn :D

Tuesday, January 12, 2010 8:05:00 AM

:g:

Wednesday, January 13, 2010 9:25:00 PM

woooowwww...oke sekali nich..mau coba aakkhh

Wednesday, January 13, 2010 9:26:00 PM

thanx ilmunya mas, sukses terus yaa

Thursday, January 14, 2010 4:09:00 PM

@ all, makasih uda ngoment.. :j:

Friday, March 05, 2010 6:11:00 AM

keren bosss !!! akuu cobaa yaakkk

Post a Comment

Silahkan berkomentar dengan baik, sopan, bijak dan membangun demi kepentingan bersama.

 
Support : My personal blog - Yusron Krista
Copyright © 2011. Leciku - Portal Berita Anak Muda - All Rights Reserved
Proudly powered by Blogger