Create Rich Media Tooltips, provide online help, zoom in to images
display rich content and tips with just a few clicks.
Customize
the display of the tooltips, including the style, color and position.
Apply rich designs, include and auto-fit photos, slideshows, movies,
alerts or other content in your tooltips.
Apply special
transition effects such as fade, slide and fly effects for a staggering
user experience and place your tooltips anywhere you like on your site.
Advanced Tooltips Manual
Create Rich Media Tooltips, provide online help, zoom in to images display rich content and tips with just a few clicks.
The Basics: Adding Tooltips to a Form
Introduction
In this tutorial we'll show you how to add tooltips to a
form.
Creating a Basic Page
Create a new HTML page
Create a new or open an existing HTML page. We add a form to our page:
Adding the Tooltip
- Adding the behavior
Select the form field where you want to apply the tooltip, open the Behavior panel in Dreamweaver, select the Behaviors tab press on the + icon and choose DMXzone -> Show Advanced Tooltip.
A new popup appears
- Setting the Positioning and Contents options
We enter a basic text in the Content field, we type "Enter your Full Name".
We set the Width and Height to auto, this means that the size of the tooltip is automatically determined. We define the Show at property to bottom-left. We set the X and Y properties to auto so the tooltip will stay close to the entry field.
- Choosing the Behavior options
We set the Effect to fly and the Easing to InCirc. Feel to experiment with other effects and easing options and experience the rich range of options and combinations. We the Effect Duration to 600 but change the Effect Delay to 300 to start the appearance of the tooltip. We also leave the Close when option to mouse out to hide the tooltip again when we move the mouse out (you can also set it to click out, which requires a click outside the link area to close the tooltip). We check the Close button to insert a close button in the tooltip.
- Setting the Style options
We set the Style theme option to white. To give our tooltip a nice white background with a shadow. And we press OK.
- Final steps
Optionally change the event of your behavior, in this case we leave it to onFocus so the user sees the tooltip when he enters the form field.
Save the files and upload them to your server. The end result should be similar to the screenshot below.
Applying the Hide Advanced Tooltip Behavior
- Adding the behavior
Select the form field where you applied the Show Advanced Tooltip the tooltip, open the Behavior panel in Dreamweaver, select the Behaviors tab press on the + icon and choose DMXzone -> Hide Advanced Tooltip and press OK.
- Final steps
Change the event of your behavior to onBlur so the tooltip is closed when the user has entered his name and moves the cursor to a next form field.
Save the files and upload them to your server. The end result should be similar to the screenshot below.