Tool Tips for SSI Web 6 & 7

Tool tips are built into SSI Web version 8.0 and later. These instructions are for version 6 and 7 of SSI Web.


Below is an example of what the tool tips would look like in a survey. Place your mouse over the top of the bold text below.


How to place tool tips in your SSI Web survey:

  1. Download, unzip and place tool_tips.js in your graphics folder.
    (NOTE: If you are running SSI Web version 6 or earlier you will also need to include mootools_v1_2.js which is provided in the zip file. Make sure to uncomment the mootools reference below.)
  2. 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>
    <!-- NOTE: If running version 6 or earlier uncomment the line below -->
     <script src="/[%GraphicsPath()%]mootools_v1_2.js" type="text/javascript"></script> 
    <style type="text/css">
    .tips {font-weight: bold;}
    	font-size: 12px;
    	width: 100px;
    	height: 60px;
    	border: 1px solid #7F7F7F;
    	background-color: #E6E6E6;
    	padding: 4px;
    	position: absolute;
    	z-index: 1000;
    	display: none;
  3. 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.
  4. 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
    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.
  5. 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">
    SetupToolTip(3, "tip");