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

Show tooltip when user hovers over radio button in matrix table question

  • February 21, 2023
  • 3 replies
  • 751 views

khobin
Forum|alt.badge.img+4

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.

3 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • February 21, 2023

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.


khobin
Forum|alt.badge.img+4
  • Author
  • February 22, 2023

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);
});
});



TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • February 22, 2023

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]]);