Change hover text font size without changing the font size of main text in multiple choice option | XM Community
Skip to main content
We are trying to change the font size of hover text within a single multiple choice option without changing the font size of the question.

Here is the code we entered directly into the multiple choice box:



<span href ="#" title="TEXT TO HOVER">TEXT TO DISPLAY AS MAIN TEXT</span>



I do not have any experience with code so any help will be greatly appreciated. Thanks!
Try using a CSS tooltip instead of Title: https://www.w3schools.com/css/css_tooltip.asp



I modified the above example slightly as a starting point for you. Example code:



<style>

/* Tooltip container */

.tooltip {

position: relative;

display: inline-block;

}



/* Tooltip text */

.tooltip .tooltiptext {

visibility: hidden;

background-color: black;

color: #fff;

text-align: center;

padding: 5px 0;

border-radius: 6px;

top: -5px;

left: 105%;

font-size: 40px; /* this changes your hover text font size */

}



/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {

visibility: visible;

}

</style>



<div class="tooltip">TEXT TO DISPLAY AS MAIN TEXT

<span class="tooltiptext">TEXT TO HOVER</span>

</div>
Thanks Matt! Not sure if this is what I was supposed to do but I pasted your code in rich text format/source but nothing happens when I mouseover (no hover text appears). Additionally, I've attached an screenshot where you can see that the question text is not aligned properly next to the button. ! Any suggestions? Thanks so much.
Well, it looks like something has gone wrong there. I'm attaching a QSF file of a working example. Can you import this and try it out? How does it look when you preview the survey?
It looks great and the hover works! I wonder if there is an issue pasting the code into the multiple choice option which is what I'm trying to do. In the survey example you sent, the code is entered in the Question Text section.
Oh, I misunderstood you initially. Thought you wanted the hover to happen on the question text itself. Doing it on the single answer choice will require some additional thought, because that's probably going to depend on which survey theme you have applied.



Can you speak more about why you want this mouseover behavior only to be applied to one specific answer choice? Maybe it will lead to a better solution for you.
Thanks, sure... We actually want the hover to be applied to 4 out of 5 single choice options in our survey. The 4 single choices are ratings,(Outstanding, Successful, Partially Successful, etc.). Each rating has its own definition. It is the definition of each rating that we want to appear on hover/mouseover. Does that help?
The simple solution here is to add the style tag to your question html view, and use the div setup from it in your answers, this *should* work. Though is untested by me at the moment.
@PC_928,



The suggestion from @AnthonyR will help. Here's the QSF file with that slight change. What I was saying earlier about this depending on your theme is still valid, though (i.e. this may need to be modified to look good in some themes).
@Matt_Christie_Walker, @AnthonyR - Thank you both! I haven't had an opportunity to try this but will keep you posted. Thanks again for your support!
@Matt_Christie_Walker @AnthonyR - Just a shout-out! I am all set and have applied the code you sent to the multiple choice options in the question. The only thing I changed was the background color of the hover and font size and color for the text. Thank you both!
@matt_christie_walker - I imported your qsf file. the mouseover does not seem to work in preview mode. does that make sense?
Hi everyone - I have implemented the above suggestion in HTML view of the answers. It's working perfectly! One question - is there a way to expand the hover area? The only way the message pops up is if the user hovers exactly on the answer. Ideally, the message would show when the user hovers anywhere over the answer.



!

Hi everyone,
Coming a bit late to this discussion but wondering if someone can help me.
I am trying to add hover over in my questions. However, I noticed that the amount of text that we can provide is quite limited as otherwise it just cut. Also it seems that once setting some style setting to an hover over, all the other ones take the same style... which is quite annoying. I am using the code provided by Matt.
not too familiar with HTML and wondering if there is something I am doing wrong?
Thanks for your help!
Juliette

Leave a Reply


Terms & Conditions