Adding hover over / mouse over descriptions for response options

emiconsultingemiconsulting Community Member Qubie ✭

Adding hover over / mouse over descriptions for response options

Hi, I'm trying to add descriptions to response options when you hover over them. From what I've seen on the board, the code to do this should be:

Response option

This does not appear to work, am I doing something incorrectly? My immediate thought was that the theme may determine whether or not this works?

Any input would be greatly appreciated.

Best,

Ian

Best Answer

  • Rich_Boits_WalkerRich_Boits_Walker Indianapolis Sage ✭✭✭
    edited May 2018 Accepted Answer

    You can currently do this with the html title attribute. It is setup slightly differently if you want the hover over text (tool tip) on the question or on the scale.

    For questions:

    • Click on the question to edit, but go to the HTML view tab to the right of the edit box
    • Set your question like this <span title="Hover text">Question Text?</span>

    For choices/scales:

    • Set the title attribute directly in the edit box
    • <span title="Hover text for detailed description of this choice">Scale choice</span>

Answers

  • AkdashboardAkdashboard South CarolinaCommunity Member Superuser ✭✭✭✭
    edited July 2018

    @Rich_Boits_Walker - I think I am missing something here. Where is the code that that would enable a change to either the question or choice boxes upon hover?

    --Never mind my comment. I wasn't patient enough to let the mouse stay over the text. This works as described.

  • luapoluapo AustriaCommunity Member Qubie ✭

    Hi, so I used the "title" to create a mouseover, that worked. My Problem is that the mouseover disappears after 5 Seconds, so reading a longer text is a pain since you have to re-move the mouse on it multiple times.
    Is there a way to make it last longer? Or alternatively something like "onmouseenter"? Onmouseenter / onmouseover themselves don't seem to work here though.

    Best Regards

  • Mohammedali_Rajapakar_UgamMohammedali_Rajapakar_Ugam Mumbai - IndiaUnconfirmed, Qualtrics Partner Wizard ✭✭✭✭✭

    I think you should try following this discussion on mouse over, hope you will get your answer:
    https://www.qualtrics.com/community/discussion/comment/2417#Comment_2417

  • MelkeoMelkeo LondonCommunity Member Qubie ✭

    Hi everyone, just jumping on this thread, is it possible to have a mouseover without using html code? The reason I ask is because we're automatically transferring the survey responses to another platform and because of the character limitation, I can't have the data correctly transferred at the moment.

  • lamason_ncsu19lamason_ncsu19 NCCommunity Member Qubie ✭

    Is it possible to have this function not be so technical? or have very specific directions for those new to the tool for example: where in the html box do you add the code in? does it matter? and then where do i type in the text that i want to hover?

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    @lamason_ncsu19 said:
    Is it possible to have this function not be so technical? or have very specific directions for those new to the tool for example: where in the html box do you add the code in? does it matter? and then where do i type in the text that i want to hover?

    For a simple tooltip, you can add a title attribute to any html element. For example:

    <div title="Text to show on hover">The text to hover over</div>
    
  • JSwiezJSwiez WisconsinCommunity Member Qubie ✭

    Thanks for the tips.
    Any way to get this to work on the mobile version of the survey?
    I do see this working great on a traditional PC/Laptop, etc.

  • JSwiezJSwiez WisconsinCommunity Member Qubie ✭

    Also, I found that my embedded data got goofed up for the question choice span title.
    Suggestions on how to avoid this? (I just want the yellow highlighted display choice itself.

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    @JSwiez said:
    Thanks for the tips.
    Any way to get this to work on the mobile version of the survey?
    I do see this working great on a traditional PC/Laptop, etc.

    You need to use a more advanced JS based tooltips solution to support mobile.

    @JSwiez said:
    Also, I found that my embedded data got goofed up for the question choice span title.
    Suggestions on how to avoid this? (I just want the yellow highlighted display choice itself.

    Save the embedded variable using JS, and use jQuery.text() to extract just the text from the span.

  • JSwiezJSwiez WisconsinCommunity Member Qubie ✭

    FYI - 4/26/19 - As per Qualtrics Support - the ability to have hover text for the mobile side of things is already a request:
    "Unfortunately, I am not able to give you a time line for this development. The request has already been send to engineers. However, they do not provide SLA's."

  • JSwiezJSwiez WisconsinCommunity Member Qubie ✭

    @ Tom - Thanks. Do you know what the more advanced JS based tooltips are for mobile? Or is it best to wait for Qualtrics to complete development on?

    I was able to use the Survey Flow and add an embedded field to accommodate the issue with hover text.

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    @JSwiez said:
    @ Tom - Thanks. Do you know what the more advanced JS based tooltips are for mobile? Or is it best to wait for Qualtrics to complete development on?

    Do an Internet search for "responsive tooltip." This is very doable right now. I wouldn't hold your breath for Qualtrics...just because it has been requested doesn't mean they'll do it. Even if they do it, it may be a very long time.

  • JSwiezJSwiez WisconsinCommunity Member Qubie ✭

    Thanks @Tom!
    I am using the JavaScript embedded in the HTML of the question title in Qualtrics. It pops up great on a PC, but still can't get the text to pop-up on the mobile. Do I have too much pop-up text?

    CODE:

    I would like to report one of the following: (See below for a description of each)

    $( function() { var targets = $( '[rel~=tooltip]' ), target = false, tooltip = false, title = false; targets.bind( 'mouseenter', function() { target = $( this ); tip = target.attr( 'title' ); tooltip = $( '

    ' ); if( !tip || tip == '' ) return false; target.removeAttr( 'title' ); tooltip.css( 'opacity', 0 ) .html( tip ) .appendTo( 'body' ); var init_tooltip = function() { if( $( window ).width() < tooltip.outerWidth() * 1.5 ) tooltip.css( 'max-width', $( 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() > $( 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(); $( window ).resize( init_tooltip ); var remove_tooltip = function() { tooltip.animate( { top: '-=10', opacity: 0 }, 50, function() { $( this ).remove(); }); target.attr( 'title', tip ); }; target.bind( 'mouseleave', remove_tooltip ); tooltip.bind( 'click', remove_tooltip ); }); });
    **Bullying / Harassment **Incident OR Safety Threat or Concerns  OR General Concern / Complaint / Idea
  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    @JSwiez,

    A few of things:

    1. I assume the code uses jQuery. In Qualtrics don't use $ for jQuery. Spell it out as jQuery ( jQuery("[rel=~tooltip]").
    2. Don't put your JS in the question text html. Click the left cog and select "Add JavaScript" then put it in the addOnload or addOnReady functions.
    3. When you post code to the community it should be easily readable (include line feeds and indentation) and put it in fences, like this:

    ```
    Your code goes here
    ```

    Then it will look like this:

    Your code goes here
    
  • JSwiezJSwiez WisconsinCommunity Member Qubie ✭

    @Tom - You are fantastic!
    I got it to work with your help.
    In Qualtrics substitute in the JavaScript jQuery for $.
    Example: Spell it out as jQuery ( jQuery("[rel=~tooltip]").

    JavaScript - Goes here: Click the left cog and select "Add JavaScript" then put it in the addOnload or addOnReady functions.
    HTML goes in title of question title with style tags.


    Thank you!

  • JGelattJGelatt Community Member Qubie ✭

    @Rich_Boits_Walker said:
    You can currently do this with the html title attribute. It is setup slightly differently if you want the hover over text (tool tip) on the question or on the scale.

    For questions:

    • Click on the question to edit, but go to the HTML view tab to the right of the edit box
    • Set your question like this <span title="Hover text">Question Text?</span>

    For choices/scales:

    • Set the title attribute directly in the edit box
    • <span title="Hover text for detailed description of this choice">Scale choice</span>

    Im trying to add a tooltip to a stars slider however using the Scale choice code is not working. What should i be putting for the scale choice? one/1/star/stars/onestar?

Sign In to Comment