Tool Tips for SSI Web

Example: Place your mouse over the top of the bold text below.

How many times have you eaten dessert after dinner in the past five days?

Tool tips can even contain graphics! And the same tip can be displayed multiple times (graphics)!

sweets, ice cream, cake, chocolate

after 5PM

How to place tool tips in your SSI Web survey:

Download ssiweb_tool_tips.zip, unzip and place tool_tips.js and mootools_v1_2.js in your graphics folder.

In your SSI Web study go to Write Questionnaire, Global Settings, Headers and Footers, <HEAD> Tag and copy in the following text:

<script src="[%GraphicsPath()%]tool_tips.js" type="text/javascript"></script> <script src="[%GraphicsPath()%]mootools_v1_2.js" type="text/javascript"></script> <style type="text/css"> .tips { font-weight: bold; } .tip_text { font-size: 12px; width: 100px; height: 60px; border: 1px solid #7F7F7F; background-color: #E6E6E6; padding: 4px; position: absolute; z-index: 1000; display: none; } </style>

Wrap a span or a div tag around the text that you want to link to the tip.

For example:

<span class="tip_1 tips">dessert</span>

Notice the class name. Each unique tip needs a unique class name. "tip_1 tips", "tip_2 tips", etc.

Create the HTML for the popup text that will be shown when a user moves their mouse over the link. The HTML and the link need to be hooked up by the way that their class and id are named. For example if you have:

<span class="tip_1 tips">dessert</span>

then you need to place HTML similar to the following anywhere on the page:

<div id="tip_1_text" class="tip_text" style="width: 100px; height: 60px;"> sweets, ice cream, cake, chocolate </div>

Notice the the link has the class named "tip_1 tips" and the HTML for the text has and id named "tip_1_text". Also notice that you can change the size of the text box by changing the width and the height.

Place the code below at the bottom of each page with tool tips. The first parameter is the number of unique tips on the page. This needs to be placed after all of the tool tips. You might consider placing it in a separate text/html question at the bottom of the page.

<script language="javascript">  </script>