Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So, now let's go implement that tooltips feature that we saw, when we rolled over the surfboard and we show the user a large thumbnail of the board that they are looking at, rather than making them go to a separate webpage. I am going to go ahead and open up my file here in my Editor and let's go to the site. Remember that was in the gear section, and I am going up the boards file here. So, a couple of things I want to point out.
Here is the webpage, and what I am going to do is scroll down to the bottom. So you can see down here at the bottom, there's a div here whose class has been set to tooltipContent, and the tooltipContent is, if we go look at our CSS. So, let's first find that. That tooltipContent div is positioned absolutely and set to have a display of none and then opacity of zero.
What we want to have happen is when the user hovers the mouse over the view larger item, the thumbnail image will appear and then it will fade out when they move their mouse back out again. Recall from earlier we have a helper function that does just that for us and it's called the hover function. We want all this to get setup on the document load. I am going to write a little document ready function. And remember throughout the course I have been doing something like this, where I say document.ready. There's a shortcut version that jQuery gives you where you simply pass the document.ready function directly to the jQuery object.
So I am just going to go ahead and do that here as a shortcut. What we want to have happen is we are going to use jQuery to get a reference to that view larger item and remember that it has an id on it of viewlarger and on the viewlarger item we are going to define a hover function. Remember that the hover function takes two function arguments. The first of which is the function that you wanted to have called when the mouse enters the element.
The second is the function that you want to have called when the mouse leaves. In the function for when the hover begins, we are going to use jQuery and we are going to define an offset variable, which gets the offset of the gear item in the page. Let's scroll down real quick. So, the gearItem is right here. It's this div, and this div is what contains the little thumbnail, the smaller image.
So there's the image and it has the little viewlarger and the other links in it. So we are going to get the id of this guy right here, because that's whose position we want. So we are going to use jQuery to do that and we are going to get the gearItem and we are going to use our CSS function offset and recall from our CSS chapter, this gets us the offset information for that item and this works on cross-browsers. Now that we have the offset information for the gearItem, we are going to use jQuery to move the overlay on top of the small image.
So to do that, recall that the tooltip is contained within a div named tooltip1. We are going to set some CSS properties on that. We are going to set the top property to the offset.top that just came back. Then we are going to use a little statement chaining to do the same thing with the left property. I am going to do offset.left, and then finally we are going to make it visible, and we will do that with some CSS.
And we will do display and we will call block. Now, again, there's a lot of ways to skin this cat. I am doing separate CSS calls. There is probably more efficient ways to do this, but for the sake of illustration, this way it makes it pretty clear to see what's going on. Then after we have positioned it, made it visible, we are going to animate it up. So once again, we get tooltip1 and we are going to animate the opacity value up to 1.0, over the course of 300 milliseconds.
So it's going to happen very quickly. So that will make it visible, and in fact, let's just quickly test that in the browser. So, we will bring up the site, go to the gear, go to the boards, mouse over, okay there it is. It's not going away however. So we are going to fix that. So that's this function here. So to make it go away when the mouse moves out, we will just write another jQuery statement that tells tooltip1 to animate its opacity setting down to zero, over the course of 300 milliseconds and we are going to define a callback function and the callback function is going to set tooltip1, and we are going to set its display back to being invisible.
So, that's all there is to that. We are now at a point where we can go back to the browser and test this out. So let's switch back to the browser. Let's refresh and now when we move it up, you can see it's fading in. It's fading out. Everything is all nice. So that's creating a tooltip. Let's move on now to the next feature.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 102026 Viewers
61 Video lessons · 88745 Viewers
71 Video lessons · 72565 Viewers
56 Video lessons · 104207 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.