Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS4 New Features
Illustration by

Customizing Spry tooltips


From:

Dreamweaver CS4 New Features

with James Williamson

Video: Customizing Spry tooltips

Our first tooltip is- ah, how do you say it? It's a little bland. So it's time to do a little customizing. Like all Spry widgets, you can modify either the CSS or the JavaScript to style a widget to meet your design or to change the default functionality. For our tooltips, we'll first add a little CSS to treat the look and feel of it and then we'll examine some of the options we have regarding our tooltip's behavior. We will finish up by adding our last three tooltips, once we have the first one modified to our liking. So if you are following along with me in the example files, I'm in the 11 folder and I have opened up the shop.htm file.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Dreamweaver CS4 New Features
1h 57m Intermediate Sep 23, 2008

Viewers: in countries Watching now:

In Dreamweaver CS4 New Features, Adobe Master Instructor James Williamson focuses on the improvements that benefit typical workflows in this popular web design and development tool. James demonstrates how to make efficient use of the new user interface, including the workspace manager, code navigator, Live view, and Property inspector. He also explores the capabilities of the Spry AJAX framework, including validation, tooltips, and datasets. Exercise files accompany the course.

Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Customizing Spry tooltips

Our first tooltip is- ah, how do you say it? It's a little bland. So it's time to do a little customizing. Like all Spry widgets, you can modify either the CSS or the JavaScript to style a widget to meet your design or to change the default functionality. For our tooltips, we'll first add a little CSS to treat the look and feel of it and then we'll examine some of the options we have regarding our tooltip's behavior. We will finish up by adding our last three tooltips, once we have the first one modified to our liking. So if you are following along with me in the example files, I'm in the 11 folder and I have opened up the shop.htm file.

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.

But if you're wanting to make sure that tooltips on one page look different than the other one, you may want to use local styles like this or you might have to modify some of the class name assignments. If you modify the class name assignments, make sure that that modification doesn't harm the external JavaScript functionality, so you may need just add some additional structuring to your file or add some additional IDs. It's not hard at all to imagine the wonderfully creative and functional uses you can come up with for the Spry Tooltips. Keep in mind that you could control the look and feel if you're changing the CSS and the functionality by changing options on the Properties inspector or even by modifying the JavaScript itself.

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.

There are currently no FAQs about Dreamweaver CS4 New Features.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS4 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.