Sawtooth Software: The Survey Software of Choice

Alternative ToolTip for SSI Web 6, 7, & 8

Is there an alternative way to add a text-only tooltip to SSI Web 6, 7, and 8 rather than using JavaScript, CSS, or the SSIScript ToolTip function?

The tooltip (a.k.a. info tip or hover hint) is a common graphical user interface element on web pages. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over. Tooltips do not usually work on mobile devices because there isn't a cursor to hover over text.

If you do not want to use the built-in ToolTip function that was introduced in SSI Web 8, or you do not want to use a bit of custom JavaScript or jQuery code, there is a simple alternative built right into HTML itself: the title property. Keep in mind, however, that this tooltip will only display text, not graphics.

There are at least two ways we can use this title property. These are described below.

Let's say you have a list of seven cupcake flavors that you want to display in a select question. For the items in your list you would enter something like this:

1. Using the <A> HREF tag

  1. <a href="#" title="Sweet almond cake with Swiss buttercream">Almond</a>
  2. <a href="#" title="Almond cake chopped almonds, paired with Amaretto buttercream">Almond Amaretto Cream</a>
  3. <a href="#" title="Delicate cake containing baked apples and cinnamon, layered with Swiss buttercream">Apple and Cinnamon</a>
  4. <a href="#" title="Moist yellow cake layered with sautéed bananas, caramel and chocolate ganache">Banana Caramel</a>
  5. <a href="#" title="A moist yellow cake layered with traditional bananas foster - ripe bananas sautéed in dark sugar and liqueur - topped with Swiss buttercream">Bananas Foster</a>
  6. <a href="#" title="Yellow cake layered with beurre noisette buttercream, which has the rich, nutty flavor of browned butter (does not contain nuts)">Beurre Noisette</a>
  7. <a href="#" title="Chocolate cake drizzled with cherry liquour and layered with sweet cherries and Swiss buttercream">Black Forest</a>

What this will do is create a link to itself (that is the a href="#" part of the code) that can be clicked or hovered-over. When it is clicked, it does not go anywhere. When the link is hovered-over, a tooltip box will appear below the link with the information from the title property. 

Here's a live example (hover over each cake flavor):

2. Using the <P> tag

You can also accomplish the same thing using the <P> tag. Of course, the <P> tag may contain CSS styling information in it that may make it not look the way you want it to in your list. If this is the case, you'll need to edit the CSS properties as well. But let's assume it looks great to you. Here is all you need to do:

  1. <p title="Sweet almond cake with Swiss buttercream">Almond</p>
  2. <p title="Almond cake chopped almonds, paired with Amaretto buttercream">Almond Amaretto Cream</p>
  3. <p title="Delicate cake containing baked apples and cinnamon, layered with Swiss buttercream">Apple and Cinnamon</p>
  4. <p title="Moist yellow cake layered with sautéed bananas, caramel and chocolate ganache">Banana Caramel</p>
  5. <p title="A moist yellow cake layered with traditional bananas foster - ripe bananas sautéed in dark sugar and liqueur - topped with Swiss buttercream">Bananas Foster</p>
  6. <p title="Yellow cake layered with beurre noisette buttercream, which has the rich, nutty flavor of browned butter (does not contain nuts)">Beurre Noisette</p>
  7. <p title="Chocolate cake drizzled with cherry liquour and layered with sweet cherries and Swiss buttercream">Black Forest</p>

Here's a live example (hover over each cake flavor):

  1. Almond

  2. Almond Amaretto Cream

  3. Apple and Cinnamon

  4. Banana Caramel

  5. Bananas Foster

  6. Beurre Noisette

  7. Black Forest

A piece of cake, isn't it?

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 434 5493
Email: support@sawtoothsoftware.com

We are open!

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
Email: software@skimgroup.com
Online: www.skimgroup.com

We're open!

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