Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In our first exercise, we will create a Spry Tooltip and examine the default settings before customizing it to look and feel the way we want it to. So we're back in Dreamweaver and since we're working along with the exercise files, we're going to go into the 10 folder and we're going to open up the shop.htm that is found inside that folder. If I collapse my panels down to icons so that we have little bit more room, I can scroll down and find all of the thumbnails already on the page that we want to apply tooltip to.
Now tooltips can be triggered by any element that has an ID applied to it. So one of the first things that we need to do is take all of these thumbnails and assign an ID to them. So let's do that first. I'm going to go ahead and click on the thumbnail image of the t-shirt. And using the Properties inspector in the upper left-hand corner, We will go ahead and assign it an ID. Let's go ahead and give this an ID of shirt. We'll do this for each of the thumbnails. I also like the first print and it's going to get an ID of printOne. If you are going to change these or do something a little bit different than I am, you are going to want to make sure that you remember what you name them. So the first print will be printOne, the second one will be printTwo and third one, of course, will be printThree.
So we have shirt, printOne, printTwo, and printThree and that's what we're going to do our tooltips for. We'll go ahead and select the t-shirt, your first one. We'll go ahead and add a Tooltip for that so you can see how easy this is. So go ahead and select the element, again make sure that it has an ID assigned to it, and then we will go up to our Insert panel and we'll click on the Spry assets so that we see all of those. Now the Tooltip is a widget. So it's added to the Widget section and since it's a new one, it is the last Spry widget. So it says Spry Tooltip, go ahead and click to add a Spry Tooltip to the page.
You'll also want to be very careful here. You might click it once, not see anything happen and click again. Avoid that temptation. Just because the dialog box doesn't pop up, doesn't mean that something hasn't been added to the page. Let's scroll down just a little bit. And in fact, I can see down towards the bottom of the page, I now have a little blue outline that says, "Tooltip content goes here." And the Properties inspector is giving me a little bit of information about my tooltip that we could customize and we'll do more on that little bit later. Let's go ahead and throw some content in there first. I'm going to highlight the text that says, "Tooltip content goes here" and we're going to replace this with our actual text for the tooltip. So let's type in, "Our most popular T has our AsterRisk artwork front and center. Pure cotton pleasure, baby!" And then we'll add an explanation point because we're hip like that. Alright, I'm going to format this is as a paragraph and to do that, I'll click anywhere inside the text and I'll click back on the HTML icon on the Properties inspector and I'll grab the Format menu and choose a Paragraph.
So this is really simply just structured XHTML and we can format this using our styles any way that we want. I will place my cursor right in front of the line, Our most popular T, because we're going to add an image here. You may have remembered from the tooltip earlier, it has a photo and then the descriptive text underneath it. So click right in front of that, we'll go back to our Insert panel, we will go to our Common Objects and let's go ahead and Insert an image. Now these images are in a very special location. So I'm going to go into the 10 folder and I'm going to go into the images directory and inside that, we have a folder called specials.
So I'll double-click that to open it up and what we're looking for is we're looking for the bigger image. So this is building_lg.jpeg. So I'll click that and click OK and we'll just go ahead and give that small text, large shirt and it adds it to the page. Now, it doesn't look all that great right now but we will worry about how it looks in just a moment. Let's go ahead and save the file and as we do that, notice that it's going to add the SpryTooltip.css and the SpryTooltip.js to our SpryAssets directory.
So I'll go and click OK. Now if I preview this in our browser, when I mouse over the t-shirt, up comes our tooltip. Again, look and the feel of it is not really what we want but now that we have the basics of adding a tooltip out of the way, we will examine in our next video what we can do to modify our tooltip so that they look and act just the way we want.
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.
Your file was successfully uploaded.