Adding in Hover text for the options of a Side by Side table | XM Community
Skip to main content

Hi all,

 

I’m trying to see if there is anyway i can include hover text for an option in a side by side table, for example (in photo attached) ideally when hovering over the option selected in the '1. Client chosen' row and the 'Low Quality Demonstration / 1' column, a description of what represents selecting that option would appear.

 

I’ve contacted Qualtrics support and they have suggested that Custom Code would be required to achieve this. Is there anyone who would be able to help me or suggest how to do this? Please let me know if you need more details! Thanks! 😊

 

Any assistance would be greatly appreciated! Thank you!

Cheers,

Remy

@RemyBW This should help 


@RemyBW You can try the below step and maybe this will help!

You can set the title attribute directly in the edit box

<span title="Text to show on hover">Answer choice</span>

<span title="Text to show on hover">Scale choice</span>


Hi Deepak and Shobhit,

Thank you very much for your replies and helpful suggestions!

Please let me know if i’m missing something, but i still can’t seem to find the edit box where i can enter the code which would lead to the hover text coming up when hovering over an option in the scale. 

I’m able to input the code through the rich content editor options for the headings ‘1. Client Chosen’ and ‘Column 1’, but not for an option in the table, as shown ('1. Client chosen' row and the 'No Demonstration / 1' column). I have selected this option and then once right clicked, the options that come up are shown in the attached image.

 

Thank you very much for your help and suggestions! Any more would be greatly appreciated!
 

Kind Regards,

Remy

 


@RemyBW - What you want to do would require writing fairly complicated JavaScript to add titles to the radio button labels.


I’d suggest to add a click function instead of hover that will allow your css much more freedom than hover functionality as hover might/might not work for all devices.

Just googe .click() function and add a css with tags to add your text to be shown when a class is clicked example:

JS

jQuery(‘#statement_1’).click({

jQuery(‘#para1’).css(‘display’,’inline’)

});

HTML:

Add this in question text:

<span class=”para1”>The text to be shown on click</span>

These tags work on every browser/devices.

Hope this helps!


Leave a Reply