See this: https://www.qualtrics.com/community/discussion/comment/13721#Comment_13721

---

Thanks for your quick response, Tom!



I tried it using the following guide:

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



I have pasted the HTML code into the CSS Box (Look & Feel --> Style --> Custom CSS) and saved it.



Then I have copied the Java-Code into the Questions JavaScript addOnReady-area (I have replaced the "$" with "jQuery", as you suggested in your comment).



Then I tried to write



```

<abbr title="User Experience" rel="tooltip">UX</abbr>

```

in an answer option. Unfortunately, it doesn't accept the code. It displays the following:



!



Could you (or anyone) tell me where the problem is? Sorry for dumb asking, but I have literally zero experience in html or Java and am trying to put it together somehow.

---

Oh boy, I am just stupid. I didn't enter the code in HTML-view but in Normal view

(╯°□°）╯︵ ┻━┻



Thanks a lot for helping me out Tom! You just saved my job

---

Hi walli and Tom,



Could you explain what you mean please? I'm having exactly the same issue. I want the answer choice to have a tooltip for mobile. I also used the same page.



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 also changed $ to JQuery.

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



The HTML view is for the question. I can't find one for the answer choice.



Any help would be greatly appreciated.



Thanks!



Neil

---

Hi Neil,



just click on the small arrow on 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 html code.



I hope that helps.

---

walli, you star!! I thought I'd never get it working. Thank you so much!

---

hi! When i put the JS in question Javascript window, i get an error that says 'unexpected end of input". What am i doing wrong?
Qualtrics.SurveyEngine.addOnload(function()
{
var targets = jQuery( '[rel~=tooltip]' ),
    target = false,
    tooltip = false,
    title  = false;
 
  targets.bind( 'mouseenter', function()
  {
    target = jQuery( this );
    tip   = target.attr( 'title' );
    tooltip = jQuery( '

' );
 
    if( !tip || tip == '' )
      return false;
 
    target.removeAttr( 'title' );
    tooltip.css( 'opacity', 0 )
        .html( tip )
        .appendTo( 'body' );
 
    var init_tooltip = function()
    {
      if( jQuery( window ).width() < tooltip.outerWidth() * 1.5 )
        tooltip.css( 'max-width', jQuery( window ).width() / 2 );
      else
        tooltip.css( 'max-width', 340 );
 
      var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
        pos_top = target.offset().top - tooltip.outerHeight() - 20;
 
      if( pos_left < 0 )
      {
        pos_left = target.offset().left + target.outerWidth() / 2 - 20;
        tooltip.addClass( 'left' );
      }
      else
        tooltip.removeClass( 'left' );
 
      if( pos_left + tooltip.outerWidth() > jQuery( window ).width() )
      {
        pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
        tooltip.addClass( 'right' );
      }
      else
        tooltip.removeClass( 'right' );
 
      if( pos_top < 0 )
      {
        var pos_top = target.offset().top + target.outerHeight();
        tooltip.addClass( 'top' );
      }
      else
        tooltip.removeClass( 'top' );
 
      tooltip.css( { left: pos_left, top: pos_top } )
          .animate( { top: '+=10', opacity: 1 }, 50 );
    };
 
    init_tooltip();
     jQuery( window ).resize( init_tooltip );
 
    var remove_tooltip = function()
    {
      tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
      {
         jQuery( this ).remove();
      });
 
      target.attr( 'title', tip );
    };
 
    target.bind( 'mouseleave', remove_tooltip );
    tooltip.bind( 'click', remove_tooltip );
});

---

Nevermind! I fixed it I realized i was missing the extra "});" at the end.

---

Anyone know if you can use this setup to have a picture pop up?

---

https://community.qualtrics.com/XMcommunity/profile/TomG I have successfully implemented the mobile-friendly hover-over text - thanks for all the clues, but now my computer/mouse hover-over text is not working for those answer selections. How do I make hover-over text work for my answer selections for both my mobile audience and my computer/mouse audience in the same survey?

---

Hi everyone,
I did all of these steps above and it works great but my issue is the font of the hover over text is different from the survey. How do I update the font to be the same?
Thank you!

---

https://community.qualtrics.com/XMcommunity/discussion/comment/55858#Comment_55858Add a css rule for the id tooltip with a font-family to match the rest of your survey theme.
#tooltip { font-family: /*font family to match survey theme*/}

---

Sorry for all the questions.... where do I add this css rule? I know very little about JS.

---

https://community.qualtrics.com/XMcommunity/discussion/comment/55863#Comment_55863It isn't JS. It is CSS. Add it under Look & Feel -> Style -> Custom CSS.

---

Thank you!!!!

---

Hi everyone,  I am very new to adding custom content into surveys - and am trying to have a key word which a user can hover over (computer) or click on (mobile) for more information - i.e. tool tip. 

 

I followed the above, without really understanding it (!!) and I get my key word underlined and showing as a tool tip, and the info will show if I hover. 
However, how do I get this key word to be clickable on a mobile device? 

 

Have you, or a spouse/ family member, experienced these symptoms?

The code I have used in my survey question (HTML view) is below. 

The word “here” is where the tooltip is shown - but is not clickable on a mobile device.

My apologies in advance if this is an obvious fix!

 

Thanks, Mike.

 

HTML: 

 

Have you, or a spouse/ family member, had any of the following symptoms?

<b>Please hover <abbr title="Cough; cold; sore throat" rel="tooltip"><span style="color:red;">here </abbr><span style="color:black;"> for examples of symptoms</span></span></b>

---

I actually just made a video that shows you how to generate interactive pop-ups that allow rich text, embedded images, heck you can basically put anything into these pop-ups.  Basically, it uses the JavaScript modal. 

I put the code in the video description.  You basically just throw into the HTML view part of the question.  Here's the video if it would be helpful:

https://youtu.be/tXj0q5GryJs

---