Pop-Up Box for additional information (working also on mobile) | XM Community
Solved

Pop-Up Box for additional information (working also on mobile)

  • 4 January 2020
  • 16 replies
  • 2162 views
W
Rank
Userlevel 2
Badge +2
Hi!

I would like to add additional information for some keywords in our survey that should be displayed when hovering over the keyword (or clicking the keyword) in an additional pop-up box or tooltip.

Using the html span-titel command unfortunately only works for computers but not if accessing the survey with a mobile device. Also, the pop-up box disappears very quickly on some browsers (Internet Explorer... yeah, people exist that still use it 😃 ), which makes it impossible to read the text. Another problem is, that on some browsers, it takes quite some time until the pop-up appears.

Could someone share Java-code with me to solve this issue, or maybe lead me to a topic where this was already solved? I have digged through the community posts but weren't able to find a properly working java solution.

Happy for any suggestions!
icon

Best answer by TomG 4 January 2020, 22:19

View original

16 replies

TomG
Rank
Userlevel 7
Badge +27
See this: https://www.qualtrics.com/community/discussion/comment/13721#Comment_13721
W
Rank
Userlevel 2
Badge +2
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.
W
Rank
Userlevel 2
Badge +2
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 😃
A
Userlevel 2
Badge +1
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
W
Rank
Userlevel 2
Badge +2
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.
A
Userlevel 2
Badge +1
walli, you star!! I thought I'd never get it working. Thank you so much!
C
Badge +1

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

C
Badge +1

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

W
Badge +1

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

K
Badge

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?

K
Badge

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?
image.pngThank you!

TomG
Rank
Userlevel 7
Badge +27

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*/}

K
Badge

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

TomG
Rank
Userlevel 7
Badge +27

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

K
Badge

Thank you!!!!

MikeBot
Rank
Userlevel 2
Badge +8

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>

Leave a Reply


Terms & Conditions