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>

---

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

---

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

---

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

---

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.

---

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?

---

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

```

---

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.

!

---

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.

!

---

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

---

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."

---

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

---

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

---

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 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 <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?

---

Is it possible to index inside the hover over text? I would like a list of bullet points when the respondent hovers over the text

---

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

---

https://community.qualtrics.com/XMcommunity/discussion/comment/43968#Comment_43968Use a instead.

---

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

@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.”

 

---