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.
Advanced: Adding Tooltips that display dynamic content
Introduction
In this tutorial we'll show you how to include dynamic
content using a recordset.
Creating a Basic Page
Create a new ASP or PHP page
Create a new or open an existing ASP or PHP page. We'll create an ASP page and add
an image and some text to our page:
Adding the Tooltip
- Adding the behavior
Select the text or image 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
After we've defined our database connection in the Databases tab of the Application panel and created a recordset, we can include the contents of our database in the tooltip. Select the lightning bold icon next to the Content Field.
Select the contents of the recordset you want to include and press OK.
Note: that you need to escape special characters so for example if you have the following value in the Code field:
<%=(Recordset.Fields.Item("Name").Value)%> then you should replace it by
<%= Replace(Replace(Replace((Recordset.Fields.Item("Name").Value),"'", "'"),"""","""),"\","\\") %>
This makes sure that you escape single quotes, double quotes and the backslash in the values of your recordset.
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 left-top. 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, we leave it on onMouseOver.
Save the files and upload them to your server. The end result should be similar to the screenshot below (but with different content in your tooltip).
