0

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.

1

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.

<script>
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){
            allQuestions[i].setAttribute("data-desc",helptext[j]);
            if(allQuestions[i].addEventListener){
                allQuestions[i].addEventListener("mouseover",function(e){ShowMyHelpPopUp(e.srcElement)});
                allQuestions[i].addEventListener("mouseout",function(e){HideMyHelpPopUp(e.srcElement)});
            }else{
                allQuestions[i].attachEvent("onmouseover",function(e){ShowMyHelpPopUp(e.srcElement)});
                allQuestions[i].attachEvent("onmouseout",function(e){HideMyHelpPopUp(e.srcElement)});
            }
        }
    }
}
function ShowMyHelpPopUp(element){
    var oldHover = document.getElementById("HoverHelpText");
    if(oldHover){oldHover.parentElement.removeChild(oldHover)}
    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>";
    element.insertAdjacentHTML('beforeend',html);
}
function HideMyHelpPopUp(element){
    var oldHover = document.getElementById("HoverHelpText");
    if(oldHover){oldHover.parentElement.removeChild(oldHover)}
}
</script>

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