Working with the Spry Tooltip Widget in Dreamweaver
In this video I'm gonna show you how to work with the spry tooltip widget in Dreamweaver...
Download everything we made in this video (ZIP)
Hey everybody, Greg Davis here. In this video I'm gonna show you how to work with the spry tooltip widget in Dreamweaver.
Just simply select an element on your web page.
I'm gonna SELECT this text.
And let's GO to the Insert panel, Spry tab, and SELECT Spry Tooltip.
I TURN Live View ON.
And now if I HOVER over my text, this little tooltip shows up right next to my mouse.
You could use this for explaining things on a web form. You could use this for a photo album, where if users hover over one of the images, a bigger image will show up. You could use this for a lot of things.
And now I'm gonna show you how to edit your tooltip, and then I'm gonna show you how to make it look exactly the way you want it to look.
I TURN Live View OFF.
And now if you scroll down, you will find your tooltip somewhere on your page.
HERE it is, it says: "Tooltip content goes here."
This tooltip is just a regular div tag, so you could place your content in it.
I PLACE some text in it real quick.
And for editing, simply roll over your tooltip, and you can see THIS little blue tab shows up. SELECT it, and notice the properties panel becomes populated with all of the properties for your tooltip, and you can edit it.
I SELECT "Follow mouse" so my tooltip will follow the mouse.
If you select "Hide on mouse out" users will be able to hover over your tooltip.
And over HERE, you could change the offset, which computes the tooltip's position in relation to the mouse.
You could also change the delay in milliseconds.
And you could apply any of these effects to your tooltip.
Just experiment with these, and you will figure them out.
Now, let's style our tooltip with css.
I SAVE this page real quick.
And Dreamweaver is saying that these 2 supporting files have been copied to our local site to make our spry tooltip work. One of them is a css file, and the other one is a javascript file.
I HIT Ok.
And now if you take a look at your files, just HIT the Refresh button, or F5, and you will see we've got this brand new SpryAssets folder, containing the supporting files. And we can now style our tooltip with css.
So, let's GO to the css panel, and OPEN UP "SpryTooltip.css"
This is the css file that Dreamweaver created for our spry tooltip, and this is what we are gonna be editing to edit the look of our tooltip.
And it's gonna be very easy to edit because there are only THESE 2 class styles in it. And we only need to edit this: .tooltipContent class style, which is applied to the div that is holding our tooltip.
So I DOUBLE-CLICK it.
And right HERE, you can edit the font of your tooltip.
I CHANGE the font-family to Arial, and the font-size to 16px.
I GO to box, and I CHANGE the width of my tooltip to, let's say 300px.
And I'm GIVING it some padding of 10px, all the way around.
I GO to background, and I CHANGE the background color of my tooltip to… Let's get the color from HERE.
Cool!
I GO to border, and I GIVE it a solid, 1px, black border, all the way around.
I HIT Ok.
I TURN Live View ON.
And I HOVER over my text, and my tooltip shows up right next to my mouse.
So, this is how you do it. I hope you learned something. If you want more videos from me go to my website EasyWebDesignSystem.com, and join my list. Thanks a lot for watching, and see you in the next video. Bye!
Next video:
Creating a Web Photo Gallery/Album in Dreamweaver>>>All videos in recommended learning order:
How to design a website using Adobe Fireworks>>>
Building a Website Start To Finish With Dreamweaver>>>
How To Embed a YouTube Video On Your Website>>>
Floating Div Tags in Dreamweaver>>>
How To Create a Table in Dreamweaver>>>
Building a Web From in Dreamweaver>>>
Dreamweaver CSS Website Layouts>>>
Creating a CSS Drop Down Menu in Dreamweaver>>>
Creating a Spry Menu Bar in Dreamweaver>>>
Creating Spry Tabbed Panels in Dreamweaver>>>
Creating a Spry Collapsible Panel in Dreamweaver>>>
Working with the Spry Tooltip Widget in Dreamweaver>>>
Creating a Web Photo Gallery/Album in Dreamweaver>>>