Posted on Apr 13th, 2009
Filed in css
With 37 Comments

Nifty Shaped Pure CSS Tooltips

nifty-shaped-css

Finally, i’ve found how to make shaped tooltips using pure css by combining Pure CSS Tooltips from BlogohBlog and Nifty CSS Shape from Nettuts. I take a couple of minutes to make this shaped tooltips look nice. Here is the step what you have to do to make this beautiful tooltips.

  1. Create a new blank html file and type this following html script.
<a href="#" class="tooltip"><div><span class="arrow"></span>Nifty CSS Tooltip 1!</div>Shaped Tooltip 1</a>
  1. Write this following css script before your end of <HEAD> tag
.tooltip { position:relative; z-index:24; }
.tooltip div { display:none;}
.tooltip div span.arrow { 
 width: 0;
 height: 0;
 line-height: 0;
 border-bottom: 10px solid #eee;
 border-right: 10px solid white;
 position: absolute;
 top: -10px;
 left: 10px;}
.tooltip:hover {z-index:25;}
.tooltip:hover div {
display:block;
position:absolute;
width:120px;
top:30px;
left:20px;
background-color:#eee;
padding:5px;
font-size:11px;
color:#308904;
text-decoration:none;
font-family:Verdana;
}

And you’re done.

I don’t make any demo for this tutorial. But you can make your own demo by copy paste this script to your html file. But that screenshot above has give much explanation what nifty shaped tooltip looks like.

  • Digg
  • del.icio.us
  • Facebook
  • Google
  • MySpace
  • Reddit
  • StumbleUpon
  • Technorati
  • Design Float
  • Furl
  • LinkedIn

Possibly Related Post(s)

Tags : , , , , , , ,

37 Comments so far

  • annosmile

    nice info…

    at 13 April 2009, 19:23 PM
  • bamz

    waw, emang keren mas,,, sip langsung di coba nih,,,,, :super_man:

    at 13 April 2009, 23:31 PM
  • zenteguh

    i’m sorry i don’t know. but i try to know he..he… :anger:

    at 14 April 2009, 1:00 AM
  • abdusfauzi

    cool~

    at 14 April 2009, 9:05 AM
  • Infopemula

    actually i am not understand about this tooltips but who knows someday i wanted :big_smile:
    Nice Tips, Thanks

    at 14 April 2009, 9:25 AM
  • Danta

    :what: :what: :what: :what: confused.. let’s try it

    at 14 April 2009, 9:58 AM
  • uwiuw

    i think i got confused hehehe

    at 14 April 2009, 11:00 AM
  • parlin

    setelah test-test… ternyata ajib banget lae… :anger:
    it’s a great tips…
    tq…

    at 14 April 2009, 16:46 PM
  • gdenarayana

    wah keren nie mas css ama tool tipsnya :super_man:

    at 14 April 2009, 17:07 PM
  • Andre

    wow..masih gak mudeng..ntar coba baca lagi ah.. :exciting:

    at 14 April 2009, 17:19 PM
  • Tony

    ini apa lagi kang? :)

    at 14 April 2009, 17:20 PM
  • uwiuw

    oh sekarang sy mengerti….ini pake javascript donk…kayak yg biasa ada di answer.com. inikah bukan ?

    at 14 April 2009, 18:45 PM
  • Artha

    wah mulai dengan bahasanya yang keren nih mau coba juga deh ya

    at 14 April 2009, 18:52 PM
  • reallylife

    :exciting:
    nice info
    thanks ya

    at 14 April 2009, 20:43 PM
  • Paman Gober

    Selalu ada tips mantab dari dirimu bro :grimace:

    at 14 April 2009, 20:50 PM
  • ndop

    makin mantab tutorialnya…

    tapi kalau aku lirik kanan lirik kiri, kok nggak dipasang adsense ya??

    hehehe…

    at 14 April 2009, 21:03 PM
  • rismaka

    WOW great stuff man. Lot’s of great tips for web knowledge.
    Thanks.
    Hi gand, Your link was added, check it out..
    BTW nais inpo gan :haha: (spamming…….)

    at 14 April 2009, 21:43 PM
  • rismaka

    Gan, tau ga situs atau ebook atau buku deh, panduan css utk idiot-expert? Boleh sharing donk klo ada.. thanx ya…

    at 14 April 2009, 21:45 PM
  • Myryani

    pake bahasa linggis semua,, jadi bingung saya,,, :cry:

    at 14 April 2009, 23:32 PM
  • genial

    ngeletakkinnya, ‘before the end of ‘ part…??? setelah <head>? ketemu <head>? … atau pas sebelum bagian <head> artinya; tepat di atas <head>?
    maklum katro’ mslh css kang : << jd pingin liad hasilnya…

    o iy skalian nambahin komen akang di tmp saya,

    betul banget, bahwa itu emang ada terusannya, bahkan saya posting sekaligus dua part, sambungannya banyak yg gk liad, karena mslh peletakan postingannya aja, klu mereka pratiin link yg ada di gambar ‘kodok berenang’ di front pagenya, pasti mereka sadar bahwa di situ ada 2 link, pertama menuju part I, k2 water reflection final… fiuhhh.. sayang yah sampe pada gk ada yg tau..
    tp gpp lah… buat lebih jelas, klik aja menu nav ‘photoshop’ psti kebuka semua, heheheehe,, jd promosi, pink :)

    mksh udah mampir kang :)

    at 15 April 2009, 2:04 AM
  • wi3nd

    yupz,you sUcces maKe me confused :victory:

    at 15 April 2009, 11:22 AM
  • thegands

    @uwiuw:
    nope. it was totally CSS. :exciting:
    @ndop:
    hahaha… because this web still rejected by google adsense. i’ll put adsense after i use my own theme :big_smile:
    @rismaka:
    umm… i haven’t. sorry. but i have a lot of links you could visit. :big_smile:
    @Myryani:
    hahahaha… its not linggis, but engglish. :haha:
    @genial:
    put the css before the </HEAD> tag. :big_smile:
    @wi3nd:
    why?

    at 15 April 2009, 13:35 PM
  • tipis

    nifty emang maknyus. saya juga pake nifty pak buat web kantor, tapi untuk menu TAB. hasilnya emang oye :) . nice tips :)

    at 15 April 2009, 14:50 PM
  • parlin

    seX,,,seX…. (sekali-sekali)
    ntik awq buatkan juga di blog neh lae…:D

    at 15 April 2009, 18:08 PM
  • ceznez

    klo saya masih mengandalkan frontpage ama editplus buat buat themes ato sekedar design2 themes :victory:

    at 15 April 2009, 18:26 PM
  • Danta

    :super_man: :super_man:

    at 15 April 2009, 19:00 PM
  • Cipzto

    next time aku coba ya gan,
    :shocked:

    cuma copas doank :D

    at 15 April 2009, 21:00 PM
  • fariez

    Wah jd pengen cb ndiri nih mas ganda… :D

    at 16 April 2009, 4:02 AM
  • yudi

    semoga suatu hari aku bisa seperti mas ganda :shame:

    at 16 April 2009, 7:00 AM
  • Arikaka.com

    Again nice tutorial by the master…

    at 16 April 2009, 10:28 AM
  • rismaka

    Ternyata banyak komentar biasa-biasa saja di sini wakakakakak….
    Halah halah… emang siy, bahasa yg paling mudah adalah bahasa basa-basi :haha: :haha:

    Tapi nais inpo juga gan, aku klo CSS agak2 nyerah deh, jadi ga bisa kasih koment yg mutu dan nyambung buat CSS hihihi

    at 18 April 2009, 22:30 PM
  • abdusfauzi

    nice tooltips! *bookmarking*

    at 26 April 2009, 1:42 AM
  • Los Angeles web design firm

    pretty nice tips, I gonna try this out for myself. Thanks for sharing.
    Bookmarked!

    :bad_smile:
    -richard

    at 6 May 2009, 16:14 PM
  • thegands

    @Los Angeles web design firm:
    thanx richard… :big_smile:

    at 7 May 2009, 8:04 AM

Trackbacks

feel free to leave a comment

Older post :
Newer Post :

About The Author

I am Ganda Manurung, a tweenty of something Web Addicted Developer. I currently live on Bogor, West Java. You can contact me at my[firstname].[lastname]@gmail.com.

Recent POST

XHTML VALID

Subscription