close ad
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Getting Started with Validation Tooltips for Spry 2

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Design, Dreamweaver, Javascript


Validation Tooltips for Spry allows you to update your Spry validation error messages to display as tooltips. Apply this extension's functionality to any form that contains Spry validation.

This guide will show you how to modify the Spry validation on your current form to a more attractive Spry validation too tip.

arrow downRequirements

You will need the following items before starting this tutorial:

  1. Dreamweaver CS4 or later
  2. Validation Tooltips for Spry
  3. Already created form that includes Spry validations
  4. Site Defined in Dreamweaver

arrow downUpdating your validations

With Validation Tooltips for Spry already installed and the form that contains your Spry validation open in Dreamweaver, you can launch the interface to update your validation error messages.

General tab

  1. From the WebAssist menu, choose Validation Tooltips for Spry.
  2. From the Preset menu, choose the preset you would like to use for your tooltips. Each preset can be customized further from the other two tabs in this interface.

  3. Once you have selected the Preset you would like to start with, select the Position tab to modify the positioning of the tooltip.

    Position tab

  4. Customizing the positioning of your tooltips using the options provided on this tab.

    1. Tip placement: Choose the placement of the tooltip in relation to the field.
    2. Tip offset: Specify the number of pixels you wish to offset the tip of the arrow.
    3. Arrow pointer: Choose the desired appearance for the arrow pointer.
    4. Arrow offset: Specify the desired number of pixels you wish to offset the arrow.
    5. Arrow height: Specify the desired height in pixels for the arrow.

  5. Once you have configured the position for your tooltips, select the Style tab to modify the appearance.

    Style tab

  6. Customize the appearance of your tooltips from the options available.

    1. Opacity: Specify the desired opacity level for the tooltip.
    2. Text color: Specify the desired text color to be used for the tooltip.
    3. Background color: Specify the desired background color for the tooltip.
    4. Border color: Specify the desired border color for the tooltip.
    5. Close button color: Specify the desired color for the close button.
    6. Border width: Specify the desired width for the border.
    7. Border roundness: Specify the desired degree of roundedness you wish to apply to the corners.
      The rounded corners affect may not display properly within the Preview window on Windows machines. When displayed in a browser, the roundedness will display as desired.

  7. When you are ready, click OK to update your form's validation error messages with the tooltips you have designed.
  8. Once the interface closes, you can save your page and preview in a browser to test out your new tooltips.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question





Ease of use


security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.