Mobile friendly tool tip | XM Community
Skip to main content
Hi all,



I've seen a few posts about creating a tool tip when using a mobile device but I'm still having difficulty. I want to create a tool tip for answer choices - where a hint pops up when you hover over/click on a word in the answer choices. A tooltip for the desktop version was easy - it’s a simple case of adding the short code <span style ="font-size:11px; "><span title= "pop up hint" >in-text word</span></span> in the gap where you put one of the possible answers. (Annoyingly, I wanted you see the code there but it creates the tooltip instead -sorry!).



However, I am really struggling to get the mobile version working. On another thread, someone mentioned the following website, which appears to have pretty clear step-by-step instructions.



https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly



I cut-and-pasted the CSS code into Look and Feel / Style / Custom CSS code

I then cut-and-pasted the Javascript into the Advanced question options (the cog next to each question) /Add Javascript

I then cut-and-pasted the HTML code into the answer choice.



However, it doesn't work. Am I putting it all in the right places? Am I missing something out?



I've tried, as someone suggested, changing the $ symbols for JQuery, but that doesn't make a difference to getting the tool tip to work.



If anyone has any suggestions, please reply. I would really appreciate it. With next to no knowledge of Javascript, HTML or CSS, I don't really know what to do when the step-by-step instructions don't work.



Thank you very much in advance .



Neil
Solved, thanks to walli on another thread.



Two things were needed in addition to what I put in the previous post.

In Javascript, you need to make sure the Javascript code goes in

JavaScript addOnReady



And then for the HTML code, you need to click on the little arrow to the right side of your answer-option. A small list will unfold, that should also contain "Rich content editor", which you should select. In the box that will open afterwards, look for a button on the top right that looks like this: < >



That's the button that enables Source-Code mode, which accepts the html code.



Hope that helps if you too are struggling.



Neil
Hi Neil, I'm actually having trouble with this as well and wondered if there was an extra step that is needed but maybe you didn't mention? When I go to preview mode on my laptop, I can see it if I hover with the mouse and I can see in the mobile version on the side bar that there is something going on with the word for which I want to the tooltip. But if I try to select the word on my touchscreen laptop or on preview on my actual mobile device, it does nothing. I'd appreciate your insight!
Responding to my own post--I realized I had replaced $ with JQuery, not jQuery (didn't realize it was case-sensitive!).

I've followed all these tips. In the preview, I can see the pop-up text on the mobile version. However, on the phone it isn't visible. Any suggestions would be welcome.

Hello, I had to download jquery for it to work. Kate 

Hi @kpecar , how did you load/download jQuery? I tried following the instructions above. I only see the tooltip on computer screen but not on mobile screen. Thanks.

Hi @rolandrew,

I can’t recall exactly, as I had to try several different downloads before it worked but you can have a look here: https://jquery.com/download/

Kate 

Hi @kpecar ,

 

Was this function available in the free version of Qualtrics or only the upgraded version?

 

Thanks! Alice

Hi @alicea,

I believe I have the free version but I wasn’t able to confirm. It is a university account so perhaps not.

Please let me know if you are aware of how I can find out.

Cheers, Kate

Leave a Reply


Terms & Conditions