Sawtooth Software Conference 2019 | San Diego, CA, USA | September 23–27
Early-bird pricing ends August 15!

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");

Sawtooth Software

6:30 AM to 5:30 PM Mountain Time
(GMT-6; GMT-7 Autumn/Winter)
Monday through Friday

Phone: +1 801 477 4700
Fax: +1 801 337 7410

SKIM Software

9:00 AM to 5:30 PM Central European
(GMT+2; GMT+1 Autumn/Winter)
Monday through Friday

Phone: +31 10 282 3500
Fax: +31 10 282 3560

Lighthouse Studio

Lighthouse Studio is our flagship software for producing and analyzing online and offline surveys. It contains modules for general interviewing, choice-based conjoint, adaptive choice-based conjoint, adaptive choice analysis, choice-value analysis, and maxdiff exercises.

Try Lighthouse Studio

  Buy Lighthouse Studio

Demonstrate CBC Using Only Basic Math

This survey will illustrate how Choice-Based Conjoint surveys work. It involves choosing food for dinner at a baseball game. You will take a quick 9-question CBC questionnaire, and then, using simple addition arithmetic, we will analyze your results and place the results into a "what-if" market simulator to see how your results stack up against others who have completed this survey.

Begin Demonstration