How to create a picture “tooltip” popup using jQuery

This tutorial will go over a hover effect seen on many new websites. When you hover over a picture a larger version of the picture will just seem to popup on the screen magically. When you move your mouse around the picture follows it a short while. I also want to make this page work for people who have javascript turned off.

Here’s what we want to program.

There are going to be a total of 9 files we are going to need.

6 of the files are going to be pictures. There are 3 large files named 1.jpg to 3.jpg. There are three thumbnail version of the same pictures are are approximately half the size. They are called the same but with “_thumb” added to their name.

Pictures

xhtml

Most of this should be pretty easy to read. I created a container which holds 3 pictures that have a hyper link associated with each one of them. The page is going to display the thumbnail by default. If JavaScript is turned off, the use can click on the picture and they will be able to see the larger version of the picture on a separate page.

This tutorial will show you that CSS is just as important to this effect as jQuery is. Let’s go over the CSS needed for this.

CSS

• Line 1 – I do this just to reset padding and margin to 0 on everthing
• Line 2 – This will get rid of the stupid border that most browsers automatically put around images.
• Line 4 – This will eventually refer to the image that “pop’s" up”.
• Line 5 – We are going to position it absolutely. If we don’t the picture would just show up right next to the current picture on the page.
• Lines 6 –> 9 – This will create a picture frame like look around the pop-up photos. See first picture in post.

jQuery

Let’s go over the code:

• Line 1 – When the document is ready run some jQuery code
• Lines 2 & 3 – Create an offset from where the cursor is to where the picture is displayed. If you don’t have this you might notice that the picture “flickers” a bit. There reason for the picture flickering is that it is possible when moving the mouse that the cursor can touch the “popup photo” and then have it removed.
• Line 5 (part 1)– Remember hover method runs two parts.What happens when the mouse is hovered over a particular element. The second method is to do something when the mouse hovers off the element.
• Line 5 (part 2) – There is something in this line I haven’t ever talked about. It’s regarding the “e” in the function brackets. The “e” is just a variable that contains the event info. You don’t have to use “e”. You could use “event”. I just find “e” is nice and short. The Hover method end on Line 15.
• Line 6 – Start of the mouse on event.
• Line 7 – Create a var called “href”. Get the Attribute “href” and apply it’s value to the var “href”. This var keeps track of what picture to show.
• Line 8 – Create an image with the ID of “largeImage”. Apply “href” variable for the location of the picture file.
• Line 9 & 10 – These are 2 chained methods. We are going to apply the top and left coordinates of the mouse plus the offset. Again this will prevent the “flicker” from happening.
• Line 11 – Once we’ve set where we want the picture to go we want to actually append that picture into the DOM (ie. the body of the page)
• Line 12 & 13 – Start of what happens when you mouse off the thumbnail picture.
• Line 14 – Find the element with “#largeImage” and remove it completely from the page.
• Line 17 – this method will update the browser where your mouse is located when you are hovering over the pictures. By doing this the picture will seem to follow your mouse over the pictures.

 

*Update* – I made a change that made the effect look much nicer. If you add a “.fadeIn” to the image. I added both a fadeIn variable so that I only have to change the settings in one place.

jQuery