Displaying a Single Content Source in Multiple Tooltips

This lesson will show you how to display a single content source in multiple tooltips. You'll also learn how to use the Advanced Interface in a very economical and efficient way—making a single tooltip definition that you can easily assign to as many tooltip triggers as you want.

There are many scenarios where this could be a useful and economical behavior. For instance, if you mouse over each of the 4 Tooltip Triggers below, you'll get the same tooltip, sourced from a single content element, with a convenient Buy Now link for the best tooltip application this side of the Milky Way galaxy.

Mouse over the 2 tooltip triggers below

Tooltip Trigger 1

Tooltip Trigger 2

Mouse over the additional 2 triggers below

Tooltip Trigger 3

Tooltip Trigger 4

Create your Content Source

Create a DIV on your page and set it an ID of my-content. Enter a sentence or 2 inside the DIV or use the following code if you prefer:

<div id="my-content">
<p>This is my content DIV. I'm going to use this element as the content source for multiple tooltips.</p>
</div>

Create your Tooltip Triggers

Create 2 links on separate paragraphs. Use Tooltip Trigger 1 and Tooltip Trigger 2 as the link text. For the link, simply enter a # symbol in the link box. In Code View, your links should look like this:

<p><a href="#">Tooltip Trigger 1</a></p>
<p><a href="#">Tooltip Trigger 2</a></p>

Now assign a rel attribute of my-content to each link:

<p><a rel="my-content" href="#">Tooltip Trigger 1</a></p>
<p><a rel="my-content" href="#">Tooltip Trigger 2</a></p>

Define your Tooltip

Open the Advanced Tooltip Magic interface.

For Trigger Element(s), choose Tag Attribute and type rel in the box to its right.
Set the Value to my-content.

For Content Source, choose Element ID and type my-content in the box to its right.

Choose your options, positioning, and style theme.

Click OK

Preview your page

That's it!