Pop-Up Box for additional information (working also on mobile) | XM Community
Skip to main content
Michael_Cooksey
Administrator
19 days ago
Solved

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

W
Level 1 ●
Forum|alt.badge.img+2
  • walli
  • Level 1 ●
  • 12 replies
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 :D ), 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!

Best answer by TomG

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

17 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5926 replies
  • Answer
  • January 4, 2020
See this: https://www.qualtrics.com/community/discussion/comment/13721#Comment_13721
W
Shivamvig_sv
P
3 people like this
  • W
    walli
  • Shivamvig_sv
    Shivamvig_sv
  • P
    Prateek.Dang
W
Level 1 ●
Forum|alt.badge.img+2
  • walli
  • Author
  • Level 1 ●
  • 12 replies
  • January 4, 2020
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.
Shivamvig_sv
1 person likes this
  • Shivamvig_sv
    Shivamvig_sv
W
Level 1 ●
Forum|alt.badge.img+2
  • walli
  • Author
  • Level 1 ●
  • 12 replies
  • January 4, 2020
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 :D
A
Forum|alt.badge.img+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
Level 1 ●
Forum|alt.badge.img+2
  • walli
  • Author
  • Level 1 ●
  • 12 replies
  • March 10, 2020
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
1 person likes this
  • A
    AcademicNeil
A
Forum|alt.badge.img+1
walli, you star!! I thought I'd never get it working. Thank you so much!
C
Forum|alt.badge.img+1
  • Christin
  • 12 replies
  • September 30, 2020

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
Forum|alt.badge.img+1
  • Christin
  • 12 replies
  • September 30, 2020

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

W
Forum|alt.badge.img+1

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

K
Forum|alt.badge.img
  • KEJ
  • 1 reply
  • November 30, 2021

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
Forum|alt.badge.img
  • KNZed02
  • 4 replies
  • February 27, 2023

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
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5926 replies
  • February 27, 2023

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
Forum|alt.badge.img
  • KNZed02
  • 4 replies
  • February 27, 2023

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

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

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
Forum|alt.badge.img
  • KNZed02
  • 4 replies
  • February 27, 2023

Thank you!!!!

MikeBot
Level 2 ●●
Forum|alt.badge.img+8
  • MikeBot
  • Level 2 ●●
  • 15 replies
  • July 21, 2023

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>

T
Forum|alt.badge.img

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

Leave a Reply


Terms & Conditions