Nesting Tooltips Creatively

There are times when you may want to give viewers the ability to refine their choices by allowing them to drill down through sections of your content before committing to a page change. This lesson will show you how to do it using nested tooltips targeting specific lists of links as the content sources. To sample the finished project, mouse over "Breaking News" below.

Breaking News

To accomplish iour goal, we'll create 2 lists of simply styled links, then use the lists as our content sources.

Create the Trigger Link

Type the words Breaking News on your page in its own paragraph. Set it as a link by typing a # symbol in the link box on your Property Inspector. Select the link and switch to code view:

<p><a href="#">Breaking News</a></p>

Add a rel attribute and set it to news-main.

<p><a rel="news-main" href="#">Breaking News</a></p>

Create the lists

Create 2 separate unordered (bulleted) lists of links directly below your trigger link. The links can be set to null # symbols.

The first list

The second list

Assign ID, REL, and Class attributes to your lists

Assign the first list an ID of news-main and a class of tip-list. Assign the Sports link a class of news-sports.

This is how the list should look in Code View:

<ul class="tip-list" id="news-main">
<li><a href="#">Financial</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#" rel="news-sports" class="news-sports">Sports</a></li>
<li><a href="#">Religion</a></li>
</ul>

Assign the second list an ID of news-sports and a class of tip-list. The list code should look like this:

<ul class="tip-list" id="news-sports">
<li><a href="#">Baseball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Basketball</a></li>
<li><a href="#">Hockey</a></li>
<li><a href="#">Tennis</a></li>
</ul>

Style the lists

We'll set up a few style rules to make your links look pretty and to coordinate them with Toooltip Magic Style Theme 06. Create a style tag in the head region of your document:

<style type="text/css">
Place the rules here
</style>

Copy the following rules and place them between the opening and closing style tags:

.p7TTMcnt .tip-list {
margin: 0px;
padding: 0px;
}
.p7TTMcnt .tip-list li {
list-style-type: none;
}
.p7TTMcnt .tip-list a {
display: block;
text-decoration: none;
color: #000;
border-top: 1px solid #27B6E4;
border-right: 1px solid #1797C1;
border-bottom: 1px solid #1797C1;
border-left: 1px solid #27B6E4;
padding: 6px 12px;
}
.p7TTMcnt .tip-list a:hover, .p7TTMcnt .tip-list .p7TTM_open {
color: #FFF;
background-color: #333;
border-color: #333;
}
/*Set the sports link to show a right-pointing callout arrow*/
.p7TTMcnt .tip-list .news-sports {
background-image: url(p7ttm/img/p7TTM06-east.png);
background-repeat: no-repeat;
background-position: right center;
}

The selector names target objects inside the .p7TTMcnt element so the lists on your page will remain as unstyled bulleted lists. They will take on the styles when they are opened within your tooltips.

Define your Tooltip

Open the Advanced Tooltip Magic interface.

For Trigger Element(s), choose Tag Name and type A in the box to its right.

For Content Source, choose Element ID carried in Attribute and type rel in the box to its right.

Set your options and theme

Set options and Theme 06 according to the screen capture below:

Click OK

Preview your page

That's it!