Displaying a Tooltip on Page Load
This lesson will show you how to display a tooltip on page load. When this page loaded, the Special Notice tooltip opened automatically. You'll also be learning how to use the Tooltip Magic control behavior to assign a close action to a custom link inside the tooltip.
The PVII Admiration Society will be holding its first annual cotillion Thursday, November 24th 2048, at the Watergate Hotel, Washington, DC.
Call 1-800-555-1212 to reserve your seat.
Create your Tooltip Trigger
Create a link called Special Notice on your page. For the link, simply enter a # symbol in the link box. In Code View, your links should look like this:
<a href="#">Special Notice</a>
Now assign a class of notice-pop to the link:
<a id="notice-pop" href="#">Special Notice</a>
Create your Content Source
Create a DIV on your page and set it an ID of notice. At the top of the DIV, create a text link that says Close. Set the link to a null # symbol. Your code should look something like this:
<div id="notice">
<p><a href="#">Close</a></p>
<p>The<strong> PVII Admiration Society</strong> will be holding its first annual cotillion Thursday, November 24th 2048, at the Watergate Hotel, Washington, DC.</p>
<p>Call 1-800-555-1212 to reserve your seat.</p>
</div>
Define your Tooltip
Open the Advanced Tooltip Magic interface.
For Trigger Element(s), choose Element ID and type notice-pop in the box to its right.
For Content Source, choose Element ID and type notice in the box to its right.
Choose your options, positioning, and style theme using the settings in this screen capture:
Click OK
Assign the Close Behavior
Select the Close link inside your content source DIV.
Open the Dreamweaver Behaviors Panel by choosing Window > Behaviors (Shift + F4)
Open the Add Behavior list by clicking the + symbol
Select Studio VII > Tooltip Magic > Tooltip Magic - Control Actions
The Tooltip Control Actions interface will open.
For Apply Action To, select Tooltip Trigger with ID and type notice-pop into the box to its right
For Action, select Close Tooltip
Click OK
Change the event in your Behaviors panel from onMouseOver to onClick
That's it. Preview your page.