New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Dreamweaver CS4 New Features
Illustration by

Understanding the Spry Tooltip widget


From:

Dreamweaver CS4 New Features

with James Williamson

Video: Understanding the Spry Tooltip widget

Without a doubt, one of the coolest Spry additions to Dreamweaver CS4 is the addition of the Tooltip widget. A Spry-based tooltip gives you the ability to have your user hover over an element on the page and have additional content appear in a floating window. Like so. Well you can create CSS based tooltips with relative ease, the addition of the related Spry JavaScript means that you can set delays, special effects such as the fading in and out that you are seeing here and not be tied to any specific structural markup since any element on the page with an ID can trigger the tooltip.

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

Understanding the Spry Tooltip widget

Without a doubt, one of the coolest Spry additions to Dreamweaver CS4 is the addition of the Tooltip widget. A Spry-based tooltip gives you the ability to have your user hover over an element on the page and have additional content appear in a floating window. Like so. Well you can create CSS based tooltips with relative ease, the addition of the related Spry JavaScript means that you can set delays, special effects such as the fading in and out that you are seeing here and not be tied to any specific structural markup since any element on the page with an ID can trigger the tooltip.

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.

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

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.