posted on:May 8, 2008
Easiest Tooltip and Image Preview Using jQuery
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>
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>
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>
Download all 3 tricks in a bundle
Enjoyed the article?
Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.
Share on FacebookTweet thisDeliciousStumbleUpon RedditSubscribe
Comments (170 Comments)
Sorry, the comment form is closed at this time.
David Appleyard
May 8, 2008
Steph
May 8, 2008
Boris
May 8, 2008
YellowLlama
May 9, 2008
Janko
May 9, 2008
Ivan
May 9, 2008
Dragon
May 10, 2008
Josh Darville
May 10, 2008
Subash
May 11, 2008
webpixelkonsum
May 11, 2008
AndreiZ
May 11, 2008
Senko
May 12, 2008
Osvaldo
May 13, 2008
Juan
May 14, 2008
paul
May 16, 2008
snetcher
May 17, 2008
ana gomez
May 20, 2008
payastr
May 22, 2008
Andrew Cornett
May 22, 2008
Vlad
May 26, 2008
evodesign
May 28, 2008
limitless86
May 29, 2008
Masey
May 29, 2008
intelligenc
June 1, 2008
Charles
June 3, 2008
Cameron
June 9, 2008
Dalain
June 10, 2008
Jonathan Concepcion
June 14, 2008
Sun
June 14, 2008
Alex
June 19, 2008
Dave
June 20, 2008
Muneef Hameed
June 20, 2008
Olivia Bell
June 21, 2008
Ravi
June 21, 2008
Abayomi Oyewumi
June 23, 2008
Albano
June 24, 2008
Fred Riley
June 27, 2008
Umer Tahir
July 4, 2008
Enrique Espinosa
July 8, 2008
LJ
July 8, 2008
cyberbuff
July 10, 2008
James Breen
July 10, 2008
Mark Abucayon
July 13, 2008
gnysek
July 13, 2008
Alex
July 15, 2008
People Search Dude
July 17, 2008
Toxane
July 20, 2008
Em
July 21, 2008
steve
July 23, 2008
steve
July 23, 2008
Ranjit
July 24, 2008
mark
July 27, 2008
Firebubble Design
July 27, 2008
Sander Houttekier
July 28, 2008
josef
July 30, 2008
Website Designer Perth
July 31, 2008
raminhos
August 6, 2008
moshe
August 6, 2008
josh
August 8, 2008
Fiyat
August 8, 2008
sjl
August 11, 2008
rob
August 12, 2008
disenando
August 12, 2008
Dave
August 12, 2008
Hasan Tayyar BEÅžIK
August 14, 2008
egypt
August 18, 2008
coderbari
August 19, 2008
Poppy
August 21, 2008
Eddie
August 22, 2008
BLACK SHARK MEDIA
August 24, 2008
Günther
August 26, 2008
web design los angeles
September 4, 2008
Anthony
September 16, 2008
James Wigger
September 17, 2008
mastr3s
September 19, 2008
Andrew
September 25, 2008
gnaffetto
October 12, 2008
Alexandre
October 17, 2008
Mark
October 20, 2008
Bruno
October 20, 2008
weblover
December 2, 2008
Mahmoud M. Abdel-Fattah
December 2, 2008
scott
December 9, 2008
Webagentur
January 2, 2009
Gustavo Baldera
January 9, 2009
A.P
January 13, 2009
vuelos
January 14, 2009
Emanuelle
January 14, 2009
Tau
January 21, 2009
xaer8
January 22, 2009
Hiral Thaker
January 23, 2009
Chris Barnett
January 23, 2009
Tibor
January 26, 2009
T
January 27, 2009
fesh
January 27, 2009
Manny Calavera
February 3, 2009
Hiral Thaker
February 5, 2009
Milind Ghatkamble
February 7, 2009
Xboy
February 11, 2009
Edward
February 15, 2009
modoko
February 22, 2009
karacabey
February 22, 2009
Fedeweb
February 25, 2009
Artevideo
February 26, 2009
Tobias
February 26, 2009
Jim
February 28, 2009
Ischia
March 2, 2009
Alistair
March 3, 2009
peter
March 5, 2009
MegaFill
March 9, 2009
Anton
March 11, 2009
Rafael N Samapio
March 11, 2009
Sfondi
March 16, 2009
Chanie
March 16, 2009
John
March 18, 2009
zahid
March 24, 2009
lamuy
March 31, 2009
web design norwich
March 31, 2009
GadElKareem
April 1, 2009
GadElKareem
April 1, 2009
Steven
April 2, 2009
joe
April 7, 2009
gino
April 8, 2009
Mahboob ISLAM
April 16, 2009
peter
April 17, 2009
Ryan
April 19, 2009
Emil
April 19, 2009
ArthasMX
April 23, 2009
Luca Barbonaglia
April 24, 2009
robert
April 28, 2009
Anand
April 30, 2009
Aashish Singh
May 1, 2009
R Valdez
May 1, 2009
zhuge
May 4, 2009
K Nambissan
May 5, 2009
Jason Grant
May 6, 2009
LP
May 8, 2009
Ale
May 8, 2009
me , myself and i
May 12, 2009
Derek
May 12, 2009
Darthslade
May 14, 2009
P.S.
May 16, 2009
Dale Larsen
May 19, 2009
TheRose
May 21, 2009
XiShaN
May 22, 2009
Tim
May 23, 2009
Tim
May 24, 2009
PiYU
May 27, 2009
Sam
May 27, 2009
Sam
May 27, 2009
Dain
May 28, 2009
Dain
May 28, 2009
Gabriel Verdejo
May 28, 2009
asad
May 29, 2009
Thomas Svensson
May 29, 2009
SLA80
June 1, 2009
Marko Vierimaa
June 3, 2009
Eddie
June 3, 2009
Eddie
June 3, 2009
Conrad
June 6, 2009
Mottie
June 11, 2009
Krishan Rodrigo
June 15, 2009
yans
June 15, 2009
webmas
June 15, 2009
wptidbits
June 16, 2009
Katherine
June 17, 2009
Muhammad Usman Arshad
June 20, 2009
JC
June 23, 2009
Rúbel Mujica
June 25, 2009
Allen
June 28, 2009