I have created a survey to help capture results from a departmental initiative. I would like to add hover-over boxes to some of the questions to provide a more detailed explanation of the question being asked; however, I have been unable to do so. My access no longer includes the SharePoint Designer Tool.


Because the survey form is essentially a bunch of nested tables, normal techniques for adding CSS-based hover-over text won't work so well (notably, absolutely-positioned text will pop up above the table rather than above the table row). This is doubly true if you need to support Internet Explorer 8 or if your environment's masterpage forces browsers to emulate Internet Explorer 8, since IE8 does not support the "hover::after" CSS selector that is typically used to sneak hover-over text onto the page.

An alternative is to make information appear in the HTML below the question when you hover over it.

You can add the below JavaScript to a text file and upload it to a library in your site. Then edit the NewForm.aspx page (you do not need SharePoint Designer for this-- just open the new form in a new window and click Site Actions -> Edit Page) and add a content editor web part below the default form. Edit the content editor web part and in the "content link" property paste in the URL of your uploaded text file.

var questions = [
/*1*/   "The exact text of the first survey question",
/*2*/   "The exact text of the second survey question",
/*3*/   "The exact text of the third survey question"
var helptext = [
/*1*/   "Help text 1",
/*2*/   "Help text 2",
/*3*/   "Help text 3"
var allQuestions = document.querySelectorAll("td.ms-formbodysurvey");
for(var i = 0; i < allQuestions.length; i++){
    for(var j = 0; j < questions.length; j++){
        if(allQuestions[i].innerHTML.indexOf("FieldName=\""+questions[j]) > -1){
function ShowMyHelpPopUp(element){
    var oldHover = document.getElementById("HoverHelpText");
    var text = helptext;
    text = element.getAttribute("data-desc");
    while(text == null){
        element = element.parentElement; 
        text = element.getAttribute("data-desc");
    var html = "<div id='HoverHelpText' style='background-color:yellow;'>"+text+"</div>";
function HideMyHelpPopUp(element){
    var oldHover = document.getElementById("HoverHelpText");

Remember to replace the strings in the questions[] array with your survey's questions, verbatim.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy