Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As we've discussed in some of our previous movies, Spry widgets are advanced user interface controls that allow you to present your content in compelling ways. The widgets are constructed of clean HTML and styled through fully customizable CSS. The widgets available in Dreamweaver through the Insert panel are the Spry menu bar, tabbed panels, the accordion widget, collapsible panels, and the Spry Tooltip widget. The Spry Tooltip widget is one of my favorite Spry objects and it's the one we're going to use in this example.
It can add a huge punch to your site and is extremely easy to work with. The Spry Tooltip works by allowing you to have a trigger object. Usually a link or an image causes a tooltip to appear somewhere else on your page. The contents, appearance, location, and behavior of the tooltip are totally customizable and can be made to integrate seamlessly into your design. In this movie, we'll use the Spry Tooltip widget to display more information about the photos in our gallery. So I have the gallery.htm file open from the 14_05 folder and I want to scroll down into my gallery, and I've got these little links that I want to act as the trigger for the tooltip, those more links.
So I'm going to go ahead and highlight the word more and it's okay also if you just click inside the word and use the Tag Selector to select the tag. That's fine, or you can highlight the word. Either way, it does not matter. I'm going to go right up to my Insert panel and I'm going to make sure I'm looking at the Spry category and I'm just going to click once on the Spry Tooltip right there. That's it. I've added a Spry Tooltip. Now I need to do that three more times. So I'm going to highlight the text, add a Spry tooltip. Again I can do that through the Properties Inspector. Even easier, something like clicking in the link, clicking the Tag Selector, clicking the tooltip. There you go.
Now in order to save us a little bit of time, in the interests of time, one of the things I've done is placed all of the tooltip captions down here below the tooltips themselves. So they're just sitting in paragraphs down here. Sometimes when you have multiple tooltips, the toughest part is figuring out what goes where. Notice that the first tooltip that we added to the page is at the bottom of the stacking order. So I'm going to go down and find my bottom caption which is 'This shot was sent in by Samara Iodice.' I'm just going to go ahead highlight all that text and I'm just going to cut it.
So that would be Ctrl+X or Command+X. Then I'm going to go to the sprytooltip1. Again that's the bottom one. I'm going to highlight the default text and I'm going to paste just to place that into my tooltip. I need to do that for each of these guys. So I'm going to a highlight the text for the next one, cut it, move up to my tooltip, and I'm just going to up in order and paste it to replace that default text. Same thing for my next one, and then finally I'm going to grab 'Max Smith sends in a picture from Orange Grove,' cut that one, and paste that one in the tooltip as well.
Now occasionally, you may not want them to go in the SpryAssets folder. You may already have a Scripts folder that you want them to move inside of, or you may have another destination within your site that you want those to go. Well if you go your Site Setup dialog box and remember you can get there by simply clicking the name of the site itself right over here in the Files panel. You can go down your Advanced settings, and one of those settings is Spry, You can tell exactly which directory to use when placing SpryAssets on the page. Currently, we have it set to the default, but you can set that anywhere that you'd like.
Okay, so after I've saved that, I'm going to go ahead and preview that in my browser and now if I hover over one of those links now I see my tooltip. Well, okay it doesn't look great but at least it's functional. So the next thing I want to do is figure out how I can control where this tooltip appears. You can see it's occurring just sort of to the right of the link itself and I need a little bit more control over that. So I'm going to close my browser, go back in the Dreamweaver, and I'm going to stay at the bottom of the page.
I'm going to mouse over each of the Spry tooltips in turn and then click on this blue tab. That will select the Spry tooltip but more importantly, notice that the Properties Inspector is now giving me a lot of options in regards to my Spry tooltip. Now one of the first things I'm going to do is set a horizontal and vertical offset. Whenever somebody hovers over your trigger link, Dreamweaver is going to take a look at the offset values for horizontal and vertical and it's going to move up and away from the current position of the mouse. So I'm going to do a horizontal offset for my first one of -200 pixels.
That's going to move the tooltip 200 pixels to the left. I'm then going to do a vertical offset of -290 pixels. That's going to move my tooltip up. So my tooltip is going to be moved up and to the left. I can also choose an effect for the tooltip and I really like the Fade effect. That's going to fade it in a little bit and again it's going to fade it out. We can also put a Show or Hide delay in and I'm going to put a High delay of 500. That value is in milliseconds. So that means that after I mouse off of the link for the tooltip, the tooltip will stay up there for about a half- a-second and then sort of disappear.
It's also going to fade. We also have the option of having the tooltip follow the mouse. So if you were to move your mouse around within a link, the tooltip would follow it. We also have the ability to hide it if you mouse outside of the tooltip, but we're going to allow the link itself to control that functionality. So I'm going to leave both of those unchecked. I need to do that for each of these but I have a slight change for the second one. I'm going to go up to my second one and again I'm going to click that blue tab right there, it brings it up in the Properties Inspector, and this time my horizontal offset is going to be the same, -200 pixels, but the vertical offset is going to be -270 pixels. Why is that? Honestly I don't know.
As I was experimenting with those values, I noticed that the first one needed a slightly larger vertical offset then the others. It just happens that way sometimes. It might have something to do with the order that are found within the code. Who knows? But the key is that you can come back in here and experiment with this as much as you want to ensure that you're getting the desired effect. I'm once again going to give it a Hide delay of 500 and then an effect of Fade. Now I'm just going to be repeating that twice more. tooltip3, it's going to get -200 pixels horizontal offset. It's going to get -270 pixels of vertical offset.
Hide delay is going to be 500. I'm going to fade that in and out. And then finally my last tooltip, -200 pixels for the horizontal offset, -270 pixels for the vertical offset, and then a Hide delay of 500 and we're going to fade it out. I'm going to save that. Preview that in my browser. Now when I hover over them, the tooltip is not showing up right on top of my link and it's sort of over to the left little bit.
So that looks a lot better. It doesn't integrate with my design at all. There's no fixed width on these things. They're stretching out. They're hovering over everything. The typography and the color doesn't look right. So the last thing we need to do is go modify the CSS for these tooltips so that they look a little bit more integrated within our site. So I'm back in Dreamweaver now and I want to go ahead and modify the CSS for this. Now if I go over to my CSS Styles panel and I think I'm going to collapse the Files panel, just give myself a little bit more room. I can collapse the main.css, close that down, and I see that there is my external SpryTooltip.css.
You know there's really not a lot of driving this. If you click on the .tooltipContent class, that is being applied to each of the div tags that contains the tooltip. The only property on that is a background color that's sort of a cream color. So what I'm going to do is go up to my tooltipContent rule and double-click that to open up the CSS Rule Definition dialog box. I want to make a couple of really basic changes here. My font-size is going to change to 0.7em. My line-height is going to be 1.6 and I'm going to do a multiple there. I'm going to go to the Block category and do a text-align of left so that so that my text won't be centered.
Then I'm going to go to over my Box properties. In my Box properties, I'm going to deselect the Same for all. I'm going to do 10 pixels worth of top padding, 10 pixels worth of right padding, 10 pixels worth of left padding, but I'm going to do 30 pixels worth of bottom padding. I'm also going to give it an assigned width of 320 pixels. Now why in the world that I change it and give it 30 pixels worth of bottom padding? I did that because we're also going to apply a background image to our div tags. I'm going to go to my Background category and I'm just going to remove the background color itself. I don't want anything there.
And for background-image, I'm going to Browse. Again I'm going to switch to details so I can see a little bit better and what I'm looking for is right down here quote_box.png. This is a transparent PNG file and it's kind of a blue sort of Word bubble look to it, then it kind of fades out at it gets taller, but you'll notice there is some space down here at the bottom. I don't want the text to come into this transparent area. So that's why we have all that bottom padding. I'm going to go ahead and click OK. For background-repeat, I'm going to choose no-repeat and then I want to attach this to the right bottom of the parent element.
The tooltip widget is only one of the many cool Spry widgets available in Dreamweaver. I want to encourage you to take some time to experiment with different widgets and play around with their settings and the CSS that controls them. You'll find that in no time you're going to be comfortable in creating and deploying customized Spry widgets that integrate seamlessly into your site.
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.