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 with HTML Content
Introduction
In this tutorial we'll show you how to create a tooltip that
displays content from a <div> that is hidden on the page.
Creating the DIV
- Create a new HTML page
Create a new or open an existing HTML page. We add a few lines of text and an image:
- Insert the div
We insert a div onto our page, add some content and name the div "tip" and set it's visibility to hidden (you can use an APdiv if you prefer).
Adding the Tooltip
- Adding the behavior
Select the text or image on the page 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
Select the div named tip in the Content dropdown box
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 next to the mouse cursor. We set the X and Y properties to cursor so the tooltip will follow the cursor.
- Choosing the Behavior options
We set the Effect to slide and the Easing to InQuart. 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, we leave it on onMouseOver.
Save the files and upload them to your server. The end result should be similar to the screenshot below.