RWExtras

To provide great flexibility and power, the superTooltips Stack includes 3 stacks with specific functions:

1. MS_superTooltipsStyle.stack: provides all the controls to set the overall style of the tooltips, e.g. background, border, etc.
2. MS_superTooltipsGroup.stack: allows setting tooltips with different width and behavior, e.g. sticky, click-through, display arrows, transition effect, etc.
3. MS_superTooltipsContent.stack: simplifies the creation of the content displayed by the tooltips

In a nutshell, the process is as follows: drop one superTooltips Style stack to set the general looks of the tooltips, then drop at least one superTooltips Group stack to set up different types of tooltips, and then drop as many superTooltips Content stacks as necessary to create the content of the tooltips.

Tooltips are triggered by hovering over links added to your page. To activate superTooltips, links must have 3 components:

1. A URL value of '#' (no quotes) or set to a specific address, if you want the link to be active, i.e. to take the visitor to another page upon clicking
2. A 'class' attribute with a value created by appending a "Group ID" (set in the superTooltips Group stack) to the keyword "sptooltip", e.g. 'sptooltip1' (no quotes)
3. A 'rel' attribute with a value equal to a pound sign (#) followed by the Content ID set in the superTooltips Content stack, e.g. '#name1' (no quotes)

Here we go...

The first thing you need to do is add a Stacks page to your project and then drop the superTooltips Style Stack. Your screen should look like the screenshot below. If not, select the stack in Edit mode and check "Render HTML in Edit mode" in Page Inspector>Page:

Next, drop a superTooltips Group stack and set a Group ID for each different type of tooltip on your page, i.e. tooltips with different formatting. superTooltips stack will show the appropriate 'class' value in parentheses to help you set the links on your page:

Next, drop as many superTooltips Content stacks as links on your page. This stack will show the appropriate 'rel' value in parentheses to help you set the links on your page:

Now you can start adding contents to each superTooltips Content stack. This is an example:

When done, it's time to set up the appropriate links to display the content that you just created.

To do this, there are 2 methods: adding manual links or using RW's Add Link command. The examples below show how to use both methods. You can review them in Edit mode to see exactly how it was done and check at the very bottom of the page all the content displayed by the various Tooltips.

You'll notice that, while all the tooltips on this page share the same look, there are 2 groups of tooltips. On the left, they are non-sticky, narrower, have drop shadows and arrows, and appear quickly. On the right side, they are sticky, wider, no drop shadows and arrows, and they fade in slowly.

Well, that's it...

You can download this Tutorial by clicking on the link at the bottom of this page. Enjoy!