Getting Started with Validation Tooltips for Spry 2

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Design, Dreamweaver, Javascript

1 ratings | Sign in to rate this tutorial | View comments

next section

Requirements

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

Updating 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.

Reviews 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.

1 ratings | Sign in to rate this tutorial