TooLTips FX Dreamweaver Extension

DHTML ToolTipsFX Interface Operation

Installing the extension

After you have purchased the extension, unzip it to a folder of your choice on your hard drive. In the zip package you will find two ToolTip extensions. Depending on the version of Dreamweaver you have will determine which one you should install.

ToolTips FX3.mxp - Dreamweaver 3
ToolTips FX4.mxp - Dreamweaver4 - MXseries - CS3

Please ensure that you click on the correct extension for your version of Dreamweaver. The Macromedia Extension Manager will then install the scripts and associated files in their correct directories.

Note: It is always best that you have Dreamweaver open and running when installing any extension.

Interface Access

The DHTML ToolTipsFX interface is accessed from the "ToolTips FX" option of the "333Creative" category of the Dreamweaver Behaviors Panel.

The Interface

Roll over the interface options for a description and tooltip effect examples
Click option area to jump to full description.

The Vertical DragScroller interface shown here

ToolTip

Enter into this area the text or HTML you wish to appear in the ToolTip when the mouse is rolled over.

MouseFollow

Check this option if you wish for the ToolTip to follow the mouse when rolled over the image or text link that you have the ToolTip applied to. If this option is checked the "Position Left" and Position Top" fields will default to "follow" indicating that no specific left and top coordinates are specified for the tips position.

Text Align

There are 3 options for aligning the text. Left - Center - Right. This will determine how the text will align inside the Tip

Position Left

This field determines the left position of the ToolTip. Enter only a number value into this field. If a number value is entered into this field the mousefollow feature will be disabled and you must enter in a value into the Position Top field.

Position Top

This field determines the top position of the ToolTip. Enter only a number value into this field. If a number value is entered into this field the mousefollow feature will be disabled and you must enter in a value into the Position Left field.

Tip Width

Enter a numeric value into this field to set the width of the ToolTip. You may have to view your page in a browser a few times and come back to reset the width of your Tip to get it just right.

Tip Height

Enter a numeric value into this field to set the height of the ToolTip. You may have to view your page in a browser a few times and come back to reset the height of your Tip to get it just right.

FX

This dropdown menu contains 43 different effects that determine how the tip is displayed. You may wish to try out each of these to get the desired effect your after. This can be changed at any time as well.

Bg Color

This color setting will set the background color of the ToolTip. A color picker is provided or you may type in a Hexadecimal value into the text field.

Save Settings

There may be times when you are building several Tips on the same page and want all of the effects, colors etc.. to be the same. This option allows for that. If checked all of your previous settings made from the last time the interface was executed will be saved and displayed as your stored defaults. If any changes are made, the new settings are then stored. At any time you may uncheck this option and the original default settings will apply.

Text Color

Determines the color of the text in the Tip. A color picker is provided for easier selection of the color. You may use the colorpicker or type in the Hexadecimal color value into the Text Color text field.

Border Color

Determines the color of the border that surrounds the Tip. A color picker is provided for easier selection of the color. You may use the colorpicker or type in the Hexadecimal color value into the Text Color text field.

Border Width

Determines the width of the border that surrounds the Tip. If the value is 0 no border will be displayed.

Border Style

Determines the CSS style of the border that surrounds the Tip. If the option "none" is selected no border will be displayed. Not all browsers will display all of the selections available. Most newer browsers will display them all.

Speed

This option controls the speed in which the effect is executed. The higher the number value the "slower" the effect.

Tip Opacity

The ToolTip can be made translucent if combined with the FX "Fade" option. The lower the number the more translucent the tip will appear. This option must be used in conjunction with the "Fade" effect.

Elements Tip can be applied to

The toolTips FX may be applied to the following elements.

text
images
image maps

The above elements may be a null link or have a real URL attached to them. A null link would be made by selecting the element and javascript:; typed into the Property Inspectors Link field.

Editing the tips after insertion

All of the options in the interface may be changed after the original insertion of the ToolTip. If you wish to make any changes to any particular Tip, select the element that you have applied the Tip to and double click the "ToolTips FX" option from the Dreamweaver Behaviors Panel. The interface will launch and changes can be made.

The Tips content

The ToolTip may contain simple text, formatted text, or valid HTML. We have instructions on how to apply each of these in the next section of the Help Files.