View Source: Make Pop-Up Tooltips with Dreamweaver


Dreamweaver CS3 debuted a collection of tools for adding interactive elements, such as drop-down navigation menus and complex form validation, to Web pages. These Spry Widgets, a combination of JavaScript, HTML, and CSS, let non-programmers easily add sophisticated interactivity to sites.

Dreamweaver CS4 includes several new Spry Widgets (see last month's column on Spry Data Sets for an example.) CS4 also introduced the Spry Tooltip, which lets you reveal a hidden box of information when someone mouses over a particular word, image, or HTML tag. These tooltips can be anything from a detailed caption describing a photo to a definition of a moused-over word (Figure 1).

Figure 1. Dreamweaver CS4's Spry Tooltips let you add pop-up information to your Web pages.

Unfortunately, the Spry Tooltip feature isn't the most straightforward of Dreamweaver's Spry Widgets -- it's easy to lose track of both the tooltip and the item (word, photo, tag) that triggers the tooltip. In this tutorial, I'll take you through the ins-and-outs of the Spry Tooltip and show you how to use CSS to make those pop-up tips stand out.

Spry Tooltip Basics
A Spry Tooltip is made up of two parts: the trigger (a word, image, or HTML tag that a visitor mouses over) and the tooltip (a normally invisible chunk of HTML that pops into view when a visitor mouses over the trigger). The basic process of adding a tooltip is this:

1. Select an element on the page to be the trigger. This can be an image, a paragraph, or a single word.

2. Insert the Spry Tooltip using either the Insert > Spry menu or the Spry tab of the Insert panel.

3. Set the tooltip's properties using the Property Inspector. As I'll discuss below, you can set the speed at which the tooltip appears or disappears, the tooltip's placement and even choose an effect to control how the tooltip appears.

4. Create CSS. A Spry tooltip's default appearance isn't good, so you'll want to change the CSS supplied with the tooltip to make it look better. Another reason for CSS: Dreamweaver adds no CSS to format the tooltip trigger, so unless your site visitors are psychic, you should provide some visual clue that the tooltip trigger is interactive.

Adding a Spry Tooltip
To follow along with this tutorial, download a compressed folder of files:

After you unzip the files, you'll have a folder named spry_tooltip_site, which contains the files for this tutorial.

1. Launch Dreamweaver and choose Site > New Site. Click the Advanced tab in the Site Definition window. Type Spry Tooltip for the site's name. Click the folder icon to the right of the Local Root Folder field and select the folder you downloaded: spry_tooltip_site. Click OK to finish defining the new site.

2. In the Files panel, double-click the file tooltip.html (or choose File > Open and open the file tooltip.html in the spry_tooltip_site folder). This page has a basic design with dummy text.

3. Select the text dolore magna at the end of the first sentence in the first paragraph. You'll add a tooltip to this text.

4. Choose Insert > Spry > Spry Tooltip (or click the tooltip button on the Spry category of the Insert Panel). While it looks like nothing has happened, you have added a tooltip.

5. Scroll to the bottom of the page and you'll see a box with the text "Tooltip content goes here." The box has a blue tab above it labeled "Spry Tooltip." When you add a tooltip, Dreamweaver inserts the HTML for the tooltip at the very bottom of the Web page, and while it's visible in Dreamweaver, if you were to preview the page now in a Web browser, you wouldn't see that text at the bottom of the page. This is where the JavaScript comes in: when you view the page in a browser, the JavaScript programming hides the tooltip box from view, until you mouse over the trigger (the dolore magna text in this case); then the tooltip appears next to the trigger (thanks to more JavaScript).

6. Choose File > Save. Dreamweaver tells you that it has to save two files -- SpryTooltip.css and SpryTooltip.js -- to your site. These files provide the programming and the styling for the tooltip. Next, you'll set some tooltip properties.

Tooltip Properties
When you click a tooltip's blue Spry Tooltip tab (Figure 2), the tooltip's settings appear in the Property Inspector.

Figure 2. A blue tab labeled "Spry Tooltip" appears directly above the tooltip on the page. Click that tab to see properties for the tooltip in the Property Inspector. Click on the image to see a larger version.

You don't have to change any of these settings for the tooltip to function, but you can tweak the way the tooltip works by changing one or more of the following:

* Tooltip name. The text box at the far left of the Property Inspector contains the tooltip's name (actually an ID applied to a <div> tag). Dreamweaver automatically provides a name -- "sprytooltip1," for example -- and since no one will see this when viewing the Web page, just leave the name alone.

* Trigger ID. When Dreamweaver inserts a tooltip, it also adds an ID to whatever you selected as the trigger. For example, if you selected an entire paragraph as a trigger, the <p> tag in the HTML would be changed to something like <p id="sprytrigger1">. In this tutorial, you selected only two words inside a paragraph, so Dreamweaver wrapped those two words in a <span> tag like this: <span id="sprytrigger1">. You can change the ID in the Property Inspector, but this is usually a bad idea -- Dreamweaver won't update the ID name for the trigger in the HTML, so you'll most likely end up with a broken tooltip. It's best to leave this option alone.

* Follow mouse. Check this box to follow the mouse if it's moved anywhere over the trigger area. I'm not sure why this is an option, since it makes me sea-sick, but if you like dancing tooltips, go for it.

* Hide on mouse out. This option is useful, though you wouldn't know it from its cryptic name. Normally a tooltip will disappear as soon as you move the mouse off of the trigger. However, this behavior can cause problems. For example, say you put a link inside the tooltip. If someone moved the mouse over the tooltip to click the link, the tooltip would disappear because the mouse must travel off the trigger area to reach for the link in the tooltip. Selecting the "Hide on mouse out" option will hide the tooltip only when the visitor mouses off both the trigger and the tooltip. The tooltip will remain visible even when someone mouses over the tooltip to click in it.

* Horizontal and vertical offsets. Type pixel values in these two boxes to control where the tooltip appears relative to the mouse. For example, you might want the tooltip to appear to the right and a little below the mouse when you mouse over the tooltip trigger. You could set the horizontal offset to 10 and the vertical offset to 15. This would place the top left corner of the tooltip 10 pixels to the right and 15 pixels below the point at which the mouse goes over the trigger. You can also use negative values. To place the tooltip's left corner to the left of the mouse, you could set the horizontal offset to -30 (30 pixels to the left).

* Show delay and hide delay. Normally a tooltip appears the moment someone mouses over a trigger. However, if a visitor is just moving the mouse across the page to click on a link in the navigation bar and happens to mouse over the trigger the tooltip will appear momentarily. This can be distracting so to prevent accidentally triggering the tooltip, set the Show delay setting to 100 or so. The delay is measured in milliseconds, so a setting of 100 is 1/10 of a second; in other words, it requires the mouse to sit on top of the trigger for 1/10 of a second before the tooltip appears. If you want the tooltip to hang out for a moment before disappearing, you can also type a number in the "Hide delay" box.

* Effect. A tooltip normally just pops into view, then pops out again. However, you can choose from two visual effects to control how a tooltip appears on the page: Blind and Fade. The blind effect makes the tooltip appear like a window blind, while the fade effect makes the tooltip quickly materialize or dematerialize like a ghost.

Go to page 2 to try out some of these settings on the tooltip you just created.

Liked This? Read These!

While HTML tables have been used in many different ways during the short life of HTML, they’re best suited for their original purpose -- displaying data. A table’s spreadsheet-like presentation is a... Read More
One principle of good information architecture is to always let your site's visitor know where they are. One way to do that is the "bread crumb" trails you see on some sites (for example, Home >... Read More
Until recently, you probably only used the word "spry" to describe an aging yet still nimble person. But Dreamweaver CS3 introduced the world to a new meaning of the word: an exciting set of tools... Read More
A Web form is one of the few ways to receive direct feedback from visitors to your site. Whether it's to sign up for an e-mail newsletter, search a database of information, or order products online,... Read More