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 Links
Introduction
In this tutorial we'll show you how to create a basic popup
that fades in and has its own close button. The popup will also hide if the
user moves the mouse out.
Creating the Tooltip
- Create a new HTML page
Create a new or open an existing HTML page. Include a link by selecting some text and adding a # in the link field of your property inspector and save the page.
- Applying the extension
Select the text or image that has the link on it (we select our text), open the Tag 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
For this tutorial we enter a basic text in the Content field, we type "Rich Content contains a combination of content forms". You can also add rich content such as images, slideshows, or other (dynamic) content.
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-right and Outside. We set the X and Y properties to auto. If you set these options to cursor, the tooltip will follow the cursor.
- Choosing the Behavior options
We leave the Effect to fade and the Easing to Outquad. 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 blue. To give our tooltip a nice blue background with a shadow. And we press OK.
- Final steps
Optionally change the event of your behavior, we leave it on onMouseOver.
Save the files and upload them to your server. The end result should be similar to the screenshot below.