Hello!
I am trying to implement the following jQuery script on my survey: https://www.jqueryscript.net/tooltip/rich-text-follow-mouse.html
Ideally, I would like to do this on specific choices of a multiple choice question, but to get started, I am unable to even do this on a plain text.
I will show exactly what I did and upload my .qsf file. Any help will be greatly appreciated. Unfortunately I couldn't make this work.
mouseovertext.qsf
Here's exactly what I did:
1: Added this to Header under look and feel:
2: Put this in the HTML of my text question:
... Hover Me ...
3: Put this in my JS code:
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place your JavaScript here to run when the page loads*/
});
Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery(function(){
jQuery("#example").jqTip({
title: "Tooltip Title",
content: "A super tiny jQuery tooltip plugin to display any HTML content in a hover-triggered tooltip popup which always follows the cursor on mouse move.",
height: 'auto',
width: 300
});
})
});
Qualtrics.SurveyEngine.addOnUnload(function()
{
/*Place your JavaScript here to run when the page is unloaded*/
});
4: Put this in CSS:
.jq-tip-dialog{
position: absolute;
background-color: rgb(92, 176, 223);
display: none;
border-radius: 4px;
}
.jq-tip-dialog h1{
margin: 0;
padding: 0;
font-size: 15px;
color: #fff;
padding: 5px 0 5px 5px;
}
.jq-tip-dialog .wrapper{
padding: 0 3px 3px 3px;
}
.jq-tip-dialog .wrapper > div{
background-color: rgb(246, 246, 246);
}
.jq-tip-dialog .wrapper > div .jq-tip-content{
padding: 5px;
margin: 0;
font-size: 14px;
overflow-y: auto;
word-wrap: break-word;
}