Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

I love jQuery and the way it makes developer's life easier. Although it took me a while to accept it and I still prefer to write my own stuff, I can't deny its advantages. Recently I had a project that demanded a rollover image preview. You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. Since we were already using jQuery on that project I decided to take it easy and investigate what can be done with that extraordinary library. So I came up with a script so simple it hurts! The best thing yet is that it can be applied for a variety of purposes. Today I will show you 3 examples of using the same very, very simple script.

Download all 3 tricks in a bundle

Features and Principle

What this script does is adds an element to the body when you roll over a certain object. That element's appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

Here are couple of examples where you can see this script in action.

Example 1: The Simplest jQuery Tooltip Ever

The script takes a title attribute of an A tag and place it inside the popup element.
Html looks like this:

<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

View this script in action

Example 2: Image Preview Gallery

Here we have a bunch of thumbnails. When each thumbnail is rolled over, script will load an image that we have linked in HREF attribute of an A tag. That makes this method accessible as well, because user can still access the target image even with disabled JavaScript.
Html:

<a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a>

or if you want to use caption add a title attribute:

<a href="image.jpg" class="preview" title="Great looking landscape">Roll over to preview</a>

View this script in action

Example 3: Links With URL Preview

This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you'll need here is a small size screenshot of the target url. You'll put screenshot image location in in REL attribute of the A tag and script will do the rest.
Like so:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

again, if you wish to use caption add a title attribute:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

View this script in action

Download all 3 tricks in a bundle

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• David Appleyard on 8 May, 2008 wrote:

  Great article - that's an incredibly easy way of achieving effects which would seem complicated at first glance.

• Steph on 8 May, 2008 wrote:

  Neat! I really like example #3!

• Boris on 8 May, 2008 wrote:

  Woldn't it be better to make a plugin out of it :)

• YellowLlama on 9 May, 2008 wrote:

  Very cool.. nicely done :)

• Janko on 9 May, 2008 wrote:

  Goog examples. I started to use jQuery recently and I am glad there is more and more articles about it.

• Ivan on 9 May, 2008 wrote:

  Nice article, very useful...

• Dragon on 10 May, 2008 wrote:

  Plug and play!

• Josh Darville on 10 May, 2008 wrote:

  Great site, if you ever wanted to add a great presentation to your site please contact me. I'd love to work with you. I create custom website videos that infuse graphics, text and sound.
  
  www.TheMediaZoo.com
  
  my name is Josh
  JoshD@themediazoo.com

• Subash on 11 May, 2008 wrote:

  A CSS freak just got new ticks up his sleeves ;)
  
  Thanks Alen.

• webpixelkonsum on 11 May, 2008 wrote:

  My favorit is example three.
  Thank you for your nice work.
  
  Ralph

• AndreiZ on 11 May, 2008 wrote:

  Great article- i searched it for a lon time. Thanks you

• Senko on 12 May, 2008 wrote:

  Great script! I reworked it into a plugin:
  http://blog.senko.net/static/jquery.csstooltip.js

• Osvaldo on 13 May, 2008 wrote:

  Excellent article! Good samples.

• Juan on 14 May, 2008 wrote:

  Great script! Thank you!
  Sorry as I'm a newbie with Javascript: How could I make the big image displaying on top or to the left instead of to the right of the small image?

• paul on 16 May, 2008 wrote:

  very nice relevant scripts, thanks!

• snetcher on 17 May, 2008 wrote:

  Give please, how to add a couple of variable - meaning in the href attribute

• ana gomez on 20 May, 2008 wrote:

  Example 2 is great idea.

• payastr on 22 May, 2008 wrote:

  nice system. thanks

• Andrew Cornett on 22 May, 2008 wrote:

  Shoot. Is there a good example using Prototyle/Scriptaculous?

• Vlad on 26 May, 2008 wrote:

  Hi, thanks for the tip!
  There is one problem with this script - for some reason if the script is outside of an UpdatePanel (Ajax.net) it sometimes "gets confused" and removes the title value but never returns it or shows title value of one link on other one (because this.t is never gets erased for some reason)
  did anyone encounter these issues?
  does anyone have a fix?
  
  Thanks again

• evodesign on 28 May, 2008 wrote:

  This is really nice.
  Thanks

• limitless86 on 29 May, 2008 wrote:

  This is fantastic, finally i can do away with all those over branded pre written solutions, much appreciated!

• Masey on 29 May, 2008 wrote:

  Great script - but can anyone tell me how to get the tip to appear to the left of the cursor? I've tried changing the "xoffset" and "yoffset", but that's not an adequate solution as each tip I am using is diferent sizes and the one setting doesn't work for all.
  
  Any help here would be greatly appreciated.

• intelligenc on 1 Jun, 2008 wrote:

  i had a little problem but i've solved it. I'd like to share with you. My problem was z-index problem and i gave "1" and it worked. Because before this i was under my other div which has z-index value and absolute position.
  
  

• Charles on 3 Jun, 2008 wrote:

  Hi,
  
  Is there a way to simply show the content of a hidden div in this tooltip ?
  
  Thank you
  
  Charles

• Cameron on 9 Jun, 2008 wrote:

  Hi, great trick! Love the simplicity and I'm now implementing on my personal homepage. Works fine on text links, but I'm having issues getting example-3-style to work on an image map. Anyone care to give me a few pointers on what I may be doing wrong / how I can get this to work? Thanks - cameron

• Dalain on 10 Jun, 2008 wrote:

  Clean, and nice code.
  
  I used the id tag as my href to allow a preview and also the ability to link to another page.
  
  Useful if you have a thumbnail of an image, and you want to link to an actual page.
  Still working on an image map solution.

• Jonathan Concepcion on 14 Jun, 2008 wrote:

  I love this image preview its perfect to my recent project.

• Sun on 14 Jun, 2008 wrote:

  I come from China,you are so great!
  Nice code!I like it very much.
  
  
  Sorry for my poor English .
  

• Alex on 19 Jun, 2008 wrote:

  Thank you so much for this, I'm a total javascript "noob" and I was able to adapt it for my needs within 3 seconds.
  
  Thank you, Thank you, Thank you!!

• Dave on 20 Jun, 2008 wrote:

  This sucks....seriosly....either make a plugin or keep it to yourself

• Muneef Hameed on 20 Jun, 2008 wrote:

  WoW!
  i like it!

• Olivia Bell on 21 Jun, 2008 wrote:

  #3 is great, much better than things like Lightbox - faster etc

• Ravi on 21 Jun, 2008 wrote:

  Great code! Thank you very much... i was looking exactly for this
  Ravi.

• Abayomi Oyewumi on 23 Jun, 2008 wrote:

  Thanks a million
  u just added to a life
  greeeeeeeeeee

• Albano on 24 Jun, 2008 wrote:

  Its great, really. Just a question: is there a way to make it be in the same page with lightbox and make both work? If I put it, my lightbox quits working. Regards.

• Fred Riley on 27 Jun, 2008 wrote:

  The tooltip rollover can be implemented without script, using the title attribute of a XHTML element, eg:
  
  Home
  Both IE7 and Firefox 2 render this as a tooltip on mouseover. Ok, it's not strictly what the title attribute should be used for, but it's fairly common practice these days. Think of it as 'off-label' tagging ;-)
  
  Fred

• Umer Tahir on 4 Jul, 2008 wrote:

  Check out these tool-tips:
  
  http://jim-murray.ca/shows.html
  
  Just hover over some of the underlined shows.

• Enrique Espinosa on 8 Jul, 2008 wrote:

  I found your image preview to be by far the easiest and cleanest to implement. However, if found that the latest version of Firefox 3.0 for Mac to not hover the image and puts it at the bottom of a main page content. Not sure if this is a problem fixed within your script, or if it's a Firefox issue.

• LJ on 8 Jul, 2008 wrote:

  Hi, I am having some issues with the tool tip pop up showing UNDER form elements to the right of the rollover image... any suggestions on how i get it sitting on top of these? or getting it sitting to the left of the image rather than the right? thanks!

• cyberbuff on 10 Jul, 2008 wrote:

  great.

• James Breen on 10 Jul, 2008 wrote:

  These are great but they don't validate, what a disappointment. I am looking for some tool tips that validate. I am a web designer and it looks bad if I have a site that does not validate.
  
  http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcssglobe.com%2Flab%2Ftooltip%2F01%2F
  
  Thanks
  Jim

• Mark Abucayon on 13 Jul, 2008 wrote:

  wow I like it, in fact I used it in one of my websites, Thanks for sharing this one. I really like it. Good job

• gnysek on 13 Jul, 2008 wrote:

  It's super! I searching something similar to mootools tip and here I found it! Thanks for this script.
  I don't belive that it's so easy!

• Alex on 15 Jul, 2008 wrote:

  This way is really great, but i found only 1 way for displaying ToolTip ABOVE the cursor:
  
  $("#preview")
  .fadeIn("fast",function(){
  $("#preview")
  .css("left",(e.pageX + xOffset) + "px")
  .css("top",(e.pageY - $("#preview").height()) + "px");
  yOffset = $("#preview").height();
  });
  
  Maybe there Is a better way?

• People Search Dude on 17 Jul, 2008 wrote:

  Sweet! Been searching for something like this! Saves me from having to figure things out and code by hand.
  
  Clean implementation too!

• Toxane on 20 Jul, 2008 wrote:

  Thanks Alen, very nice.

• Em on 21 Jul, 2008 wrote:

  I've been looking all day for this.
  
  Unfortunately, there are no instructions, so I'm not quite sure how to connect the js files in the download with the textarea cut and paste code.

• steve on 23 Jul, 2008 wrote:

  hello, thanks for the great script. I have it working on one of my projects, but is there anyway that it can display the tooltip to the top and left of the cursor, rather than to the bottom right? any help would be greatly appreciated.

• steve on 23 Jul, 2008 wrote:

  sorry, I meant I am trying to get it to display to the top and right of the cursor. thank you.