Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So you just navigate to 11 and open up shop.htm. This is pretty much where we left off from the 10 video. So if you haven't completed that one yet, you might want to go back to that one and complete that one. So I'm going to go ahead and collapse all of our panels so that we have a little bit more screen real-estate and then we'll scroll down just a little bit. I'm going to switch over to Code view and in Code view, in head of the document, you'll notice that we have some styles that are commented out. We're going to uncomment those and they're going to drive the look and the feel of our Tooltip widgets on this page only because they are embedded styles. So I'm going to highlight all of those guys and using my Code toolbar, we'll go ahead and strip the comment out.
Now let's take just a moment to look at these. Now when we create a Tooltip widget, the tooltip content is surrounded in a div tag with the class tooltipContent. So this is what the styles are driving. Notice that the first style, the tooltipContent style is setting a width, a different background color, giving him a slight border and little bit of padding all the way around it. We are controlling the way our image looks inside the tooltipContent by displaying as a block level element and then centering it using the auto margins. Our paragraph inside the tooltipContent, we're giving it a specific font-family and a smaller font-size to make it fit inside there a little bit nicer.
So those styles are simply overriding the default styles found within our tooltip.css. In the case of the image and the paragraph, they are adding to them. So we are just sort of customizing the look and the feel of that. Let's take a look at what that's going to do for us. So I will switch back to Design view and we'll save the file and we'll preview that in our browser. When I hover over on my shirt, now we see our new tooltip and it looks a lot better. It's got nice little border around it, the image is centered and the text, it's appearing directly underneath it. So it's a little nicer and a little bit more aligned with the rest of our side content, so that's perfect.
I'm going to close the browser and go back in Dreamweaver because now I want to focus on modifying the actual tooltip itself in terms of its functionality. Now if you want to modify your tooltip, you don't select the element that's triggering it. You'll notice that the Property inspector doesn't give us any feedback about the tooltip itself. We need to scroll down and find the actual tooltip and then again click on the tab that represents the Spry content, you just want to click on that. Now our Properties inspector is giving us a lot of options that we can change based upon our tooltip's behavior.
We can change the triggering element, although we don't want to change that and one of the first things I must select here is the checkbox for Hide on mouse out. What that's going to do for us is when a person mouses off of the thumbnail, the tooltip will go away. Another interesting option is the Follow mouse. If you have that turned on, as you move your mouse around, the tooltip will follow the mouse. So if you are giving somebody a hint that you want to make sure they are looking at, you can make it follow the mouse around. We can also give it Horizontal and Vertical offsets. Now these offsets are going to be related to the mouse's x and y coordinates and not the thumbnail or the element that's triggering that. So that's one thing you sort of have to remember.
The first thing we're going to do is we're going to give it a Horizontal offset of 0 and we are going to give it a Vertical offset of -300 and that's in pixels. And a little thing you need to know about the values here. Positive horizontal offsets are going to move you to the right, negative are going to move you to the left. Negative vertical offsets are going to move you up, positive vertical offsets are going to move you down and remember that is related to where the mouse currently is, not the triggering element. We can also put a Show and a Hide delay if we want. We are going to do a Show delay of 0 so that the tooltip shows up automatically but we are going to give it a Hide delay of 100. Now that is in milliseconds. So if you gave it a Hide delay of 1000, it would take a full second for it to hide after the mouse is moved off of it.
We do also have some effects that we can place on the showing and hiding. We have Blind, which I'm not a huge fan of, and then we have Fade, which is pretty nice and subtle, it's a nice little effect. So we're going to do Fade. So what we're doing is we are changing the positioning of the tooltip by giving it a Vertical offset. We're also making sure that it's hidden when a mouse is moved off of the triggering element and we're fading it out by a tenth of a second and we are using the Fade effect so that it just sort of fades out. Again, let's save our file and we'll preview that in our browser.
Now when I hover off of it, notice that the location of the tooltip is different. As I mouse off of the T-shirt, it fades out after just a little bit. Really, really nice effect. Well now that we have a single tooltip working the way we want, we should go ahead and add our additional tooltips. I'm going to scroll back up and we'll select our other thumbnails and go and apply tooltip to those as well. So just like the first print thumbnail, which will be printOne, and I will go back to my Insert panel and switch back to my Spry Objects, and I will find the Spry Tooltip widget, which is again the last widget icon, and we'll click to add the widget.
Even I'm not scrolled down far enough to see the content, the tooltip content, the Properties inspector is reflecting this particular tooltip. So you can go ahead and set these now. We'll go and choose the Hide on mouse out and we will go ahead and give the printOne a Horizontal offset of -100. So we are going to move that a little bit over to left. The Vertical offset will stay the same, so that will be -300. We're going to do the Fade effect and we will give it the same Show and Hide delay which is 0 for Show and 100 for Hide.
We're going to keep going and add some more tooltips. I will select the second print, which is the printTwo, insert another Spry Tooltip. Again, we are going to hide it on the mouse out. Now this one is going to have a Horizontal offset of -200, so you will notice that the more we move to the right, the further left we are moving the tooltip so that they don't hang off of the edge of the page. The Vertical offset will be -300, our Show delay will be 0, our Hide delay will be 100 so that's exactly the same and we will fade that one out as well.
Finally, we will select the last print image, printThree, and we'll insert another tooltip on that one. Again, we're going to hide it on mouse out. This one is going to have a Horizontal offset of -300. So we're moving that one over a little further than the other ones and the Vertical offset will also be -300 so that's going to remain the same. Show delay will be 0, Hide delay will be 100 and as we have done in the past, we will use the Fade effect. So let's go ahead and save that. Now, at this point, we have to add content to them. If I scroll down, you can see that we have these additional tooltips.
We have the tooltip fourth, the third one and the second one. The biggest thing that we need to do now is keep track of who is who. So the second one that we have added is by Spry Tooltip two and then there will be three and then four. Well I have added the content already to the page. So instead of having a browse out and find this, what we'll need to do is just need to do a little bit of copy and pasting. So going back up to our thumbnails, I can see that the second tooltip is the skyline of Charlotte at night. So we will scroll down and we will go ahead and highlight that content, the skyline at night, with the image and we will go ahead and cut that. So I'm going to Edit and choose Cut or you can use the keyboard shortcut for that.
Now we'll go back in and we'll find to which tooltip it goes inside of and it goes inside this tooltip number two. So I'm going to click inside that, highlight its content, delete that content and then paste it inside of that. So I'll go to Edit and I'll choose Paste. Now you may lose your formatting so make sure you click inside the text and format that as a paragraph so that we're getting our proper formatting. From here, well just go ahead and replace the other default tooltip contents by cutting the content from the page and then pasting it inside the appropriate tooltip.
Don't forget to do your formatting options as well so that the text isn't de-formatted as a paragraph. Now we will do our last one. Cut it, go inside the tooltip, and paste it. So make sure you are keeping track of which tooltip relates to which thumbnail. So here are all our tooltips. Again, we could go in and modify them if we wanted to in terms of their delays and their positioning. Again, all you have to do is click on that tab and you get this information.
So let's save our file and we'll preview this in our browser. And now each time we mouse every one of these elements, we get the tooltip. We'll mouse off of it, we get the Fade effect. Very nice. And the consistency in placement is due to the offsets we are giving it and obviously the consistency in appearance is due to the CSS that we have modified. So you may have noticed that we kept our cascading stylesheet modifications local to this page. If you wanted all of your tooltips look exactly the same, you'd be better off just going ahead and adding some styles to your external stylesheets, especially the stylesheets that were added with the Tooltip widget.
The last new feature of Dreamweaver CS4 that we're going to preview is another workflow time saver, the addition of the HTML type to Spry datasets within Dreamweaver.
Get unlimited access to all courses for just $25/month.Become a member
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.