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.

Special Notice

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.