Show tooltip when user hovers over radio button in matrix table question | XM Community
Skip to main content

Hi All,

Does anyone know a way to show additional information when a user hovers over one of the radio buttons in a matrix question? I'm trying to achieve something like this:
Generic Version.png
This is similar to the question asked here, but I don't see a way to specify a title for each radio button to use as the content for the tooltip, and then of course figure out how to use that data to be displayed in a tooltip. If anyone has javascript code they could share, it would be much appreciated.

The JavaScript would be something like:
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" label[for]").each(function() {
var label = jQuery(this);
var parsed = label.attr("for").split("~");
label.attr("title","This is the tooltip for statement "+parsed[2]+" scale point "+parsed[3]);
});
});
Of course, you would want to do some kind of lookup to get the tooltip text for each cell.


Thanks TomG for the code and for pointing me in the right direction.
In the spirit of sharing, here is the final code that I used to set the unique scale point tooltip text and set the title attribute. If you have more rows, than add in a new case as part of the 'switch(parsed[2])' section, if you have more columns then add in additional cases in each of the 'switch(parsed[3]' sections.
Now on to adding code so that the tooltip is displayed immediately on hover in a pretty tooltip, instead of haveing to hover for a few sections for the title text to be displayed.
Qualtrics.SurveyEngine.addOnload(function() {
jQuery("#"+this.questionId+" label[for]").each(function() {
var label = jQuery(this);
var parsed = label.attr("for").split("~");
var tooltip = "";
switch(parsed[2]) {
case "1":
switch(parsed[3]) {
case "1":
tooltip = "Tooltip text for C1R1";
break;
case "2":
tooltip = "Tooltip text for C1R2";
break;
case "3":
tooltip = "Tooltip text for C1R3";
break;
case "4":
tooltip = "Tooltip text for C1R4";
break;
}
break;
case "2":
switch(parsed[3]) {
case "1":
tooltip = "Tooltip text for C2R1";
break;
case "2":
tooltip = "Tooltip text for C2R2";
break;
case "3":
tooltip = "Tooltip text for C2R3";
break;
case "4":
tooltip = "Tooltip text for C2R4";
break;
}
break;
case "3":
switch(parsed[3]) {
case "1":
tooltip = "Tooltip text for C3R1";
break;
case "2":
tooltip = "Tooltip text for C3R2";
break;
case "3":
tooltip = "Tooltip text for C3R3";
break;
case "4":
tooltip = "Tooltip text for C3R4";
break;
}
break;
default:
tooltip = "";
}
label.attr("title", tooltip);
});
});



I would have defined the tooltips in an object (e.g., tooltips). Then you wouldn't need the switches:
label.attr("title",tooltips[parsed[2]][parsed[3]]);


Leave a Reply