How do I add hover-over text? (Power Surveys)

This script allows you to set up a hover-over description that appears when the participant holds their mouse over key words or phrases. This script will work in the following question types:

• Question text (any question type)
• Instruction text (any question type)
• Response text (standard/flat questions only)

Note:

• This script does not work in the response text of visual questions.
• This script will not work for mobile.

Detailed Steps

1. Create your question as required.
2. Copy Script 1 below into Notepad or any other text editor (e.g. Notepad++, Textpad).
3. Replace VISIBLETEXT with the text that you wish to see hover text on when the mouse moves over.
4. Replace HOVERTEXT with the text that will appear when the mouse is hovering over the regular text that you just inserted. Save the completed script in Notepad.
5. Create a new file in your text editor (Notepad, Notepad++, Textpad etc.).
6. Copy Script 2 below into your text editor.
7. Insert the completed scripts into the Script section of your question by doing the following:
   • Select your question in the Questionnaire Tree.
   • Click HTML button and replace the text you want to be the hover-over trigger text with script 1. This MUST be done in HTML mode.
   • In the Scripting section of the question, click Edit Scripts.
   • Paste script 2 into the Style tab.
   • Click Save.
8. Validate and test your survey.

Note: the width in pixels can be adjusted for Script 1 if needed.

Script 1:

<!-- 

Script Name: How do I add hover over text ? 

To ensure your script works as expected, always copy the original script from the script library found in the  support portal. Failure to use the most up to date script from the script library may cause unexpected results.  

-->

<DIV class=tooltip>VISIBLETEXT<SPAN style="WIDTH: 500px">HOVERTEXT</SPAN></DIV>

Script 2:

<!-- 

Script Name: How do I add hover over text ? 

To ensure your script works as expected, always copy the original script from the script library found in the  support portal. Failure to use the most up to date script from the script library may cause unexpected results.  

-->

<style>
div.tooltip
{
 display:inline;
 position:relative;
 z-index:24;
 color:#004165;
 text-decoration: none;

}
div.tooltip:hover { z-index:25; text-decoration:none; solid;}
div.tooltip span { display:none }
div.tooltip:hover span{
 display:block;
 padding:3px;
 position:absolute;
 top:2em; left:2em; width:auto;
 background-color:#344d75; color:#fff;
 text-align:left;
 text-decoration:none;
}
</style>  

More Information

For more information, please see our Webhelp topic Formatting text: Best Practices.