Adding hover over / mouse over descriptions for response options

@lamason_ncsu19 
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>

@JSwiez wrote: “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. 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.

@JSwiez wrote: “@ 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.

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:

<p><span style="background-color: transparent; color: rgb(0, 0, 0); font-family: Arial; white-space: pre-wrap; font-size: 16px;">I would like to report one of the following: (See below for a description of each)</span></p> <style>$( function() { var targets = $( '[rel~=tooltip]' ), target = false, tooltip = false, title = false; targets.bind( 'mouseenter', function() { target = $( this ); tip = target.attr( 'title' ); tooltip = $( '<div id="tooltip"></div>' ); 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 ); }); }); </style>

<abbr title="name calling, teasing, insults, threats, physical (hit, pushed, shoved, slapped, kicked, groping, grabbing, sexual activity, stalking, flashing or exposing of body parts, non-consensual touching), theft (property stolen), excluded from group, gossiped about, rumors spread, electronic (embarrassment through e-mail, text message, sending or forwarding unwanted nude pictures, cyber-stalking, gender (left out or mistreated badly because of who you are, heard sexists comments" rel="tooltip">Bullying / Harassment Incident</abbr> OR <abbr title="threats (verbal or social media), weapons possession, suicide/self-harm concerns, physical (assault, fights, pushing/shoving), drug/alcohol/tobacco possession, vaping, vandalism, theft, harassment, intimidation, coercion" rel="tooltip">Safety Threat or Concerns</abbr>  OR <abbr title="This could be a general concern, complaint, or idea regarding a specific school or the entire district. May relate to infrastructure (parking lot pot hole), etc." rel="tooltip">General Concern / Complaint / Idea</abbr>

@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

@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!

@Rich_Boits_Walker wrote: “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 <span title="Hover text for detailed description of this choice">Scale choice</span> code is not working. What should i be putting for the scale choice? one/1/star/stars/onestar?

JSwiez great that you got it working! Are you able to post your final solution, so that others can use it too? (ie. paste the JS code that goes in the "Add JavaScript" section, and if you had to put anything in the actual question to get it to work)

https://community.qualtrics.com/XMcommunity/discussion/comment/12669#Comment_12669Thanks mans, but l realized that using a div element might not be the best way since its an inline element thus if l have some more words to say after the div they will be pushed to the next line which was not that great in appearance for my survey

​@yunaH Use a <span> </span>  element instead.

@JSwiez Would you be willing to show me a screenshot of what the finished code looks like? I would like to put the text below in so when I hover over “Friendships” it appears and gives more detail on the group content. I need this to be PC and mobile friendly, I’m just not understanding how it is supposed to look. 

“This Small Group Series will focus on the important social skills of maintaining a friendship and inviting friends to hang out, 

Group participants will:
- Identify various tips for maintaining friendships
- Explore various activities that friends could do together
- Role play scenarios in which you ask a friend to hang out or have to tell them you do not want to or cannot.”