Spry Tooltip and form validation widgets

Learn to create tooltips with the Spry Tooltip widget. Learn about the form validation widgets that come with Dreamweaver.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Dreamweaver CS4

• Try
• Buy

Sample files

lrvid4046_dw.zip (ZIP, 11MB)

Prerequisite knowledge

Intermediate knowledge of web page creation

Spry Tooltip and form validation widgets

Adobe® Dreamweaver® CS4 offers improved and enhanced Spry integration. Spry is Adobe’s Ajax framework, and can be used to add rich user interactivity to your files by combining HTML, XML, JavaScript, and CSS. Moreover, you don’t need advanced knowledge of JavaScript to add Ajax functionality to your pages. In this tutorial, you will learn how to create a tooltip widget and examine the functionality of some form validation widgets.

Creating a tooltip widget

Creating a tooltip widget provides an excellent overview of Spry functionality in Dreamweaver. Tool tip widgets are excellent resources for when you want to give people more information about a link on your web page without sending them to another page or site. To create a tooltip widget:

1. Open a web page in Dreamweaver. Scroll to a link on the page that might need additional explanation.
2. Highlight the link so that it can act as a trigger for your Spry tooltip.

   

   Figure 1: Inserting a Spry tooltip
3. Navigate to the Insert panel at the top of the Dreamweaver window. Click the Spry Tooltip icon, the last icon from the left.
4. Scroll down to the bottom of the web page. Placeholder content is inserted to show where the Spry tooltip content goes. This content will be replaced with the information you include in your tooltip.

   

   Figure 2: Adding the Spry tooltip content in Design view
5. Type directly over the placeholder text or copy and paste the tooltip content from an external source to the Spry Tooltip text box.

   

   Figure 3: Adding the Spry tooltip content in Code view
6. You can do this in Code view as well. Delete the tooltip placeholder content from the HTML code. Highlight the content you want to place in your tooltip and drag it to the appropriate location in the code.
7. Choose File > Save. A dialog box prompts you to save an external JavaScript and an external CSS file that will control your tooltip.

   Note: For each Spry widget you add your page, Dreamweaver adds a JavaScript file and a CSS file to your website, and stores them in a folder called Spry Assets. When you are ready to publish your page, you need to upload the folder to your remote website so that the Spry functionality works.

8. Return to Design View by clicking the Design button.

Editing your tooltip

Tooltips can be styled using the /*tooltipContent selector. Properties that can be styled include the background, width, padding, and font properties such as size and color. To change the appearance of the tooltip:

1. Click the Code View button at the top of the Dreamweaver window.
2. Scroll to the portion of the code that contains the inline styles.
3. In your example file, find the tooltipContent selector that has been commented out. It will appear gray. Select the code and click the Remove Comments button in the Coding toolbar. This will activate the rule and override the external style driving the tooltip content.

   

   Figure 4: Removing the comments from the tooltip style
4. Choose File > Save to apply these changes and switch to Design view. Scroll down to the tooltip to view the new formatting.

Using JavaScript to enhance functionality

While the external CSS file determines the look and feel of the tooltip widget, the external JavaScript file determines its functionality. To modify the functionality of the tooltip widget:

1. Click inside the tooltip widget. A tab identifying the instance name of the Spry tooltip widget appears.

   

   Figure 5: The Spry Tooltip tab
2. Click the tab. The Property inspector displays the properties of the widget. From the Property inspector, you can change how the tooltip widget behaves and the external JavaScript file will be updated, in turn.

   

   Figure 6: The Property inspector
3. Enter a positive value in the Horizontal Offset text box to move text to the left when site visitors hover over the tooltip.
4. To delay the tooltip for a period of time before it disappears, enter a value for Hide Delay.
5. To apply an effect, select the desired radio button at the bottom of the Property inspector. These include None, Blind, and Fade.
6. To make the tooltip disappear when the mouse is not hovering over it, click Hide on Mouse Out.
7. Choose File > Save All to save the web page and the external JavaScript and CSS files.
8. Click the globe icon to preview the tooltip in your browser. When you hover over the targeted link, the tooltip appears and should respond as you specified in the Property inspector.

Form validation widgets

As a final note, you can also create complex client-side form validation using Dreamweaver’s validation widgets without extensive JavaScript experience. Form validation widgets give feedback to visitors as they complete and submit forms online. Some common types of form validation widgets ask users to confirm a password or enter a username in a text box. Other form validation widgets can be applied to radio buttons.

Figure 7: Form Validation widgets

Where to go from here

• Dreamweaver CS4 Help and Support
• Learn Dreamweaver CS4
• Introducing Adobe InContext editing, by David Gassner
• Creating a Spry data set, by James Williamson
• Using JavaScript, DOM, and Spry code hinting, by James Williamson
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

About the authors