tooltip
Apa kabar sahabat? kali ini saya akan memberikan tutorial Cara Membuat Tooltip dengan pseudo elements :before dan :after. Untuk lebih memahami pseudo class dan pseudo elements (baca: Mengenal Pseudo Class dan Pseudo Elements) dan untuk lebih memahami cara kerja :before dan :after (baca: Menggunakan :before dan :after dalam CSS).

Tutorial kali ini, karena banyaknya request dan pertanyaan, bagaimana cara membuat tulisan Klik ganda untuk seleksi pada tag pre di blog ini. Sebetulnya code ini terinspirasi dari blognya +Damar Zaky and sory Bro Zaky.. sampai disangka dirimu yang nyontek  :D

Saat ini, saya tidak akan memberikan kode secara langsung, karena terkadang ada perbedaan hasilnya. Kadang2 ada spasi/renggang antara panah dan kotak, tooltip yang tidak muncul, dsb. Oleh karena itu, saya akan memberikan tutorial step by step. Sudah tau kan apa itu tooltip?

Tooltip adalah komponen grafis dalam user interface pengguna. Komponen ini biasanya muncul ketika pointer mouse diarahkan ke komponen. Tooltip dapat berisi bantuan maupun informasi lain yang terkait dengan komponen tersebut. Cara ini dapat memudahkan pengguna dalam mengetahui fungsi komponen tanpa harus mencobanya terlebih dahulu dan tidak memenuhi tampilan utama aplikasi.

Sebelum memulai, siapkan dulu secangkir kopi dan sebungkus roko biar santai :D  kidding sob... silahkan simak aja caranya :

Sebagai contoh saya membuat kotak dengan id inikotak, nantinya bisa berupa menu, icon, pre, blockquote dsb. Kode CSS dari inikotak yang saya buat seperti ini :
#inikotak {
width:400px;
height:90px;
background:#c7430f;
color:#f5d5c9;
text-align:center;
margin:0 auto;
text-transform:uppercase;
font-family:Arial, sans-serif;
font-size:18px;
line-height:90px;
vertical-align: middle;
position:relative;
}
dengan kode HTML
<div id='inikotak'>INI KOTAK</div>
Maka hasilnya seperti terlihat di bawah ini:

Ini Kotak

Hal yang harus diperhatikan, sobat harus menambahkan kode position:relative untuk objek utama, agar nantinya tooltip tidak lari kemana-mana. Juga apabila ada kode overflow:hidden, hapus kode itu karena tootltip akan tersembunyi dan tidak terlihat.

Selanjutnya kita akan memulai membuat Tooltip untuk kotak di atas dengan menambahkan :before, untuk kodenya seperti ini, kode dibawah ini standar saja, yang paling penting sobat harus menambahkan position:absolute:
#inikotak::before {
content:"Ini Tooltip Lho";
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif; 
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
}
maka hasilnya akan berubah seperti ini:

Ini Kotak

Selanjutnya, kita akan menambahkan panah kecil pada tooltip, kodenya seperti ini
#inikotak::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
}
maka hasilnya akan berubah seperti ini:

Ini Kotak

Apabila ada jarak / renggang antara tooltip dan panah, atur kode top:-7 dikurangi atau ditambah. Nantinya, sobat bisa menerapkan kode :before dan :after diberbagai tempat, misalnya pada tag pre maka codenya menjadi pre:before atau pre::before.

Setelah tooltip terlihat sempurna, kita mulai langkah menghilangkan tooltip sebelum disentuh mouse, tambahkan kode dibawah ini pada #inikotak::before dan #inikotak::after
opacity:0;
visibility:hidden;
kemudian kita munculkan tooltip di atas, pada saat objek di sentuh mouse dengan kode seperti ini :
#inikotak:hover::before, #inikotak:hover::after {
opacity:.5;
visibility:visible;
}
Maka hasilnya seperti dibawah (untuk melihat hasinya, arahkan mouse ke objek)


arahkan mouse ke sini

Jadi kode keseluhannya seperti ini :
#inikotak {
width:400px;
height:90px;
background:#c7430f;
color:#f5d5c9;
text-align:center;
margin:0 auto;
text-transform:uppercase;
font-family:Arial, sans-serif;
font-size:18px;
line-height:90px;
vertical-align: middle;
position:relative;
}
#inikotak::before {
content:"Ini Tooltip Lho";
font-size:11px;
line-height:11px;
font-family:Arial,sans-serif;
text-transform:none;
padding:8px 12px;
top:-34px;
right:0px;
transition:.3s ease-out;
background:#222;
color:#fff;
border-radius:5px;
position:absolute;
opacity:0;
visibility:hidden;
}
#inikotak::after {
content:" ";
width:0;
height:0;
right:10px;
top:-7px;
transition:.3s ease-out;
border-color:#222 transparent transparent;
border-style:solid;
border-width:6px 6px 0;
position:absolute;
opacity:0;
visibility:hidden;
}
#inikotak:hover::before, #inikotak:hover::after {
opacity:.5;
visibility:visible;
}

103 komentar

Mantap kang, ini nih yang saya cari-cari :)

Balas

keren kang ismet, saya baru liat yang satu ini :)

Balas

oh itu namanya tooltip.. :D .

Balas

ini lho tooltip :D
btw, kang ismet menerima jasa pembuatan web nggak ?

Balas

dibalikin jd tiptool jg boleh mas hehehe :)

Balas

ketemu juga akhirnya ya ;)

Balas

emang baru dibuat tutornya ;)

Balas

mba, bukan mas.. xixiixixi asal jangan tpitloo susah bacanya :)

Balas

hehehe... ngga sob, waktunya susah harus konsen

Balas

Waw mantap ini yg sy tunggu2 akhir nongol juga

Balas

oh, salah panggil rupanya hehehe...

Balas

Makasih telah memberikan tutor atas pertanyaan saya kang.

dan juga saya minta ma'af kang kalau selama ini sudah rewel dengan pertanyaan-pertanyaan yang sangat merepotkan akang

Balas

tutor dari kang ismet emang josh

Balas

hehe akhirnya diposting juga ya kang hehe ...

Balas

kang template yang lama bole gk di beli...???

Balas

hehhe.. banyak yang nanya sob

Balas

sama2 sob.. santai aja lah, banyak juga yang nanya tooltip ini ko ;)

Balas

seueur nu naros kang.. ngarah kantun nuduhkeun kadieu we :)

Balas

sama2.. ngefans ke fatin ya?

Balas

gan cara menerapkan ke postingan gimana?

Balas

Wajib bookmark ieu mah kang :'( skill css abdi kudet :(

Balas

wajib buat blogger tuh sob .. ^_^

Balas

saya lihat situs yuditpres.com sudah ditutup kang :D dan diganti ama situs jual-beli..

Balas

udah clear masalahnya sob... :)

Balas

betul kata kang rian.. kayaknya ga perlu dijelasin lagi kalau jeli :)

Balas

sami kang.. abdi ge sanes jago coding... tapi jago sare :)

Balas

Hadoh,,,kopi sama rokonya dah habis nih kang. bisa galau kalo ngerjain kayak gini gak sambil ngopi mah,,, bisa bisa salah pencet nanti he,,,

Balas

jual kang .. lumayan buat nambahin speedy hehe

Balas

na kunaon atuh si yudit teh bet centil kitu kang hehe.. syukur we tos clear mah ..

Balas

akhirnya mendak oge tutorialna kang. mantep pistan. . :D
btw, blogna langkung kasep eng, like this kang.

Balas

nyoba trik css nya kang

btw cara bikin tampilan seluruh blog dengan efek long shadow kira2 penerapan kode cssnya gimana ya kang? pernah liat triknya di web luar tapi ane kurang faham maklum masih nubie :)

contohnya kang http://1.bp.blogspot.com/-yfDiwOEY1gw/UjjVlk6DEzI/AAAAAAAAAGE/rn04SME1HH4/s1600/contoh+tampilan+blog+dengan+efek+long+shadow.jpg

makasih sebelumnya.

Balas

oia contoh itu ane edit di photoshop, makasih :)

Balas

Nyimak saja Kang,,
mudah2 an saya ngrti gak nerapin di postingan saya yah..?

Balas

hehehhe.. jangan mencet punya orang aja :)

Balas

ah biasa wae.. kumaha UIN aman2 saja? :)

Balas

pasti bisa, santai aja nerapinnya :)

Balas

belum pernah pake long shadow sob, tapi sepengetahuan saya sih disatuin aja id/class yang akan dikasih shadow kalau shadownya sama, contoh :
#container, .icon, .circle, {
box-shadow: rgb(191, 191, 191) 1px 1px,
rgb(192, 192, 192) -2px 2px,
rgb(193, 193, 193) -3px 3px,
rgb(194, 194, 194) -4px 4px,
rgb(194, 194, 194) -5px 5px,
rgb(195, 195, 195) -6px 6px,
rgb(196, 196, 196) -7px 7px,
rgb(197, 197, 197) -8px 8px,
rgb(198, 198, 198) -9px 9px,
rgb(198, 198, 198) -10px 10px,
rgb(199, 199, 199) -11px 11px,
rgb(200, 200, 200) -12px 12px,
rgb(201, 201, 201) -13px 13px,
rgb(201, 201, 201) -14px 14px,
rgb(202, 202, 202) -15px 15px,
rgb(203, 203, 203) -16px 16px,
rgb(204, 204, 204) -17px 17px,
rgb(205, 205, 205) -18px 18px,
rgb(205, 205, 205) -19px 19px,
rgb(206, 206, 206) -20px 20px,
rgb(207, 207, 207) -21px 21px,
rgb(208, 208, 208) -22px 22px,
rgb(208, 208, 208) -23px 23px,
rgb(209, 209, 209) -24px 24px,
rgb(210, 210, 210) -25px 25px,
rgb(211, 211, 211) -26px 26px,
rgb(212, 212, 212) -27px 27px,
rgb(212, 212, 212) -28px 28px,
rgb(213, 213, 213) -29px 29px,
rgb(214, 214, 214) -30px 30px,
rgb(215, 215, 215) -31px 31px,
rgb(215, 215, 215) -32px 32px,
rgb(216, 216, 216) -33px 33px,
rgb(217, 217, 217) -34px 34px,
rgb(218, 218, 218) -35px 35px,
rgb(219, 219, 219) -36px 36px,
rgb(219, 219, 219) -37px 37px,
rgb(220, 220, 220) -38px 38px,
rgb(221, 221, 221) -39px 39px,
rgb(222, 222, 222) -40px 40px,
rgb(223, 223, 223) -41px 41px,
rgb(223, 223, 223) -42px 42px,
rgb(224, 224, 224) -43px 43px,
rgb(225, 225, 225) -44px 44px,
rgb(226, 226, 226) -45px 45px,
rgb(226, 226, 226) -46px 46px,
rgb(227, 227, 227) -47px 47px,
rgb(228, 228, 228) -48px 48px,
rgb(229, 229, 229) -49px 49px,
rgb(230, 230, 230) -50px 50px,
rgb(230, 230, 230) -51px 51px,
rgb(231, 231, 231) -52px 52px,
rgb(232, 232, 232) -53px 53px,
rgb(233, 233, 233) -54px 54px,
rgb(233, 233, 233) -55px 55px,
rgb(234, 234, 234) -56px 56px,
rgb(235, 235, 235) -57px 57px,
rgb(236, 236, 236) -58px 58px,
rgb(237, 237, 237) -59px 59px,
rgb(237, 237, 237) -60px 60px,
rgb(238, 238, 238) -61px 61px,
rgb(239, 239, 239) -62px 62px,
rgb(240, 240, 240) -63px 63px,
rgb(240, 240, 240) -64px 64px,
rgb(241, 241, 241) -65px 65px,
rgb(242, 242, 242) -66px 66px,
rgb(243, 243, 243) -67px 67px,
rgb(244, 244, 244) -68px 68px,
rgb(244, 244, 244) -69px 69px,
rgb(245, 245, 245) -70px 70px,
rgb(246, 246, 246) -71px 71px,
rgb(247, 247, 247) -72px 72px,
rgb(247, 247, 247) -73px 73px,
rgb(248, 248, 248) -74px 74px,
rgb(249, 249, 249) -75px 75px,
rgb(250, 250, 250) -76px 76px,
rgb(251, 251, 251) -77px 77px,
rgb(251, 251, 251) -78px 78px,
rgb(252, 252, 252) -79px 79px,
rgb(253, 253, 253) -80px 80px,
rgb(254, 254, 254) -81px 81px,
rgb(255, 255, 255) -82px 82px;
}

Balas

kang, kok ane terapin di blockquote ane g bisa yaa....
kira2 apa yg muzti di ganti lg..padahal inikotak udah aku ganti blockquote

Balas

saya liat sourcodenya ga ada blockquote::before adanya pre::before, kalau gitu untuk tag pre dong

Balas

terus kodenya kyk gmna kang???
mhon pnjelasannya
soalnya pgn make di tag blockquote aja

Balas

ayo donk kang.. saya suka sama emplate yg kemarin..
pengen punya

Balas

kang ane tunggu yaa kode buat pemasangan di blockquote..
aku udah utek2 g bisa
pliiisss

Balas

wah berarti artikelnya ga dibaca lengkap nih, coba baca ini http://blog.kangismet.net/2013/09/membuat-tooltip-dengan-before-dan-after.html#inikotak tunggu sampai load selesai.
tooltipnya kabuuur, pada .post blockquote tambah position:relative>

Balas

kang dah beres.. :)
sekarang pengen blockquotenya bsa warna/i tulisannya kyk pnyanya kang ismet..
disini ada ga tutorialnya?

Balas

Thanks infonya sobat. sangat bermanfaat sekali segala infonya.

Balas

mkasih,,makasih,,makasih,, :-d :-d

Balas

jd shadow itu diterapkan di tiap id misal sidebar wrap gt ya kang, kl gt bikin berat jg kl kebanyakan pakai shadow.. tp pengen nyoba aj unik soalnya :)
ok deh ane cicipi dl kode cssnya, makasih kang sudah membantu.

Balas

makanya sob.. paling diakali yang bisa pake image

Balas

kalau blockquote ga bisa.. kalau standar untuk kode itu bukan blockquote tapi pre. untuk membuat tag pre berwarna sesuai syntax kunjungi http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html atau http://blog.kangismet.net/2013/05/highlightjs-syntaxhighlighter-untuk.html

Balas

Anyar deui wae yeuh trik.....
pokonamah top-markotop lah mantap-surantap..

Balas

Menarik kang tutorialnya :-bd tapi saya coba baca ulang terlebih dahulu, soalnya belum paham :yaya:

Balas

wkwkw aya2 wae.. kang alex mah

Balas

silahkan sob.. soalnya suka banyak pertanyaan juga, padahal udah dijelasin

Balas

Afif Nuzia Al-asadi@ sebenarnya tutorial di atas bisa anda terapnya dimana saja, itu tergantung ketelitian anda saja, coba anda simak ulang artikel di atas, pelajari satu persatu kode CSS nya. saya jamin pasti bisa kok. saya yang masih newbie aja bisa hehehe :)

Balas

Kapan terbit edisi majalah artikel terkait yang saya tanyakan kemarin itu kang ismet? :) :) hehehehe...

Balas

belum diacak2 jeng.. hehehe secepatnya deh,masih ada antrian artikel :)

Balas

iya kang, untuk elemen yg lain msh bingung cara penerapannya :D

Balas

mantap kang ..
keep waching buat pembangunan template ane ..
luncurkan terus kang tutor" nya ..
hehe ..

Sukse terus ..
di tunggu tutor selanjutnya ..

Balas

silahkan acak2 aja blog ane sob... :)

Balas

kang mendingan yg prism syntx highlgter apa yg satunya?
menurut kang ismet bagus mna?

Balas

kalau cepet, lebih cepet prism.. tapi ga bisa dimanipulasi di kolom komentar spt blog ini. saya pake highlight js

Balas

hehe jago sare mah panyawat sanes kang? :) wkwkkwk

Balas

sammi atuh ari kitu mah kang .. :D

Balas

iyah mbk...
udah bsa kok sy..
hehehe

Balas

Kang Ane udah Coba & berhasil .Yang ane tanyakan kenapa Pas Geser ke thumbnail si "tooltip" ini gak ikut gerak kaya punya kang ismet.Ane pake Cara ini soalna yang pake Jquery pusing Ga Nongol" si "tooltip" ini.

Balas

kalau pake ini emang ga gerak, cuman disitu2 aja. kalau mau yang gerak pake jquery coba yang ini http://blog.kangismet.net/2013/07/simple-tooltip-dengan-jquery.html

Balas

Kira2 dipasang pada tag pre saya bisa gk, soalnya punya saya ada kode overflow:auto;max-height:200px;. Saya sudah coba hasilnya gk muncul..

Balas

udah saya coba di blog saya, kalau pake max-heigh atau height ga muncul :)

Balas

silahkan master doyok... :)

Balas

hamdalah aman2 saja kang, ngan langkung karebul we, da nuju dibangun deui. heheh.

Balas
Komentar ini telah dihapus oleh pengarang.

Akang Jagoan Pisan, ngiringan nongkrong kang :)

Balas

mantap kang ..
keep waching buat pembangunan template ane ..
luncurkan terus kang tutor" nya ..
hehe ..

Sukse terus ..
di tunggu tutor selanjutnya ..

Balas

mangga kang.. rokona nyandak nyalira we nya :)

Balas

heheh siap laksanakan :)

Balas

Cara Masangnya Gimana Ini Mas ?

Balas

Sekian lama saya mencari akhirnya dapet juga kang... terimakasih banyak ya kang :)

Balas

Bisa dimasukan ke link atau button css gak?

Balas

Poskan Komentar


×
Chat