Adding hover over for matrix table choice/response | XM Community
Skip to main content

Screen Shot 2022-02-16 at 11.11.55 AM.pngHi there,
I know there's been a lot of discussion on adding the mouseover feature to the question, but I haven't been able to find a solution for adding this feature over the choice field.
I'm trying to figure out how to add a hover/mouseover textbox in a Matrix table so that when a user hovers over the choices, they can see the definition associated with that particular text. The reason for this is some of the choices will contain definitions that people may not be familiar with so I'd like for them to be able to hover over that particular text, and see the definition.
Any help would be appreciated!

My ultimate goal is to be able to make the hover text stand out more in terms of font size, color, background, etc.

But I do not know which parameter within the CSS and/or JS would control that.

In this case, I get the same hover text behavior from the answer choice HTML, with or without the CSS and JS custom code that was in your instructions. 

Thank you for your help,

Scott

 @Phillsh The reason I use JS is because that allows everything to work well on a mobile device as well as a desktop. If you don’t plan on having the survey completed on mobile then you do have more options. 

 

You can change the look and feel of the pop-up in the first section of the CSS. That’s where the format is defined. 

 

Another option would be to add an information button that would create a pop-up. Pasting the following code into an answer choice would do that for you. 

 

Communicates effectively with others

<br>

<!DOCTYPE html>

<html>

<head>

    <title>Popup Button Example</title>

    <script>

        function showPopup() {

            alert("Speaks clearly, writes legibly, asks questions for clarity");

        }

    </script>

</head>

<body>

 

    <button onclick="showPopup()">More Information</button>

 

</body>

</html>

@jmborzick 

thank you for further direction!

 

___________________

Regarding JS

I do believe that the majority of my surveys will be taken on mobile. So my understanding from your comment is that I should include the JS, but will not see any visual impact as I test changes to CSS on my desktop.

 

Regarding CSS

Here is the code CSS code I am using at the survey level - Look and feel / Style / Custom CSS:

 

#tooltip
{
    text-align: center;
    color: #EF4;
    background: #E0F;
    position: absolute;
    z-index: 100;
    padding: 15px;
}

Here is the HTML codeI am using for the answer choice:

<abbr rel="tooltip" title="POP UP">Senior Manager</abbr>

 

Regardless of which parameter I use for color or background, this is what I see on the hover

 

 

 

_______________________________________

Regarding More Info Button

 

This was my first preference as you will see here below:

------------------------------------------------------------

-------------------------------------------------------------

However

I have not been able to find a solution to exclude the “button text” when I pipe forward the selected answer to then next question which looks “clumsy”.

--------------------------------------------------------------

 

Thanks again,

Any suggestions are appreciated !

 

Scott

@Phillsh You should be able to see the changes in the CSS when you’re previewing the question. As an example, I modified the CSS to read: 

#tooltip
{
    text-align: center;
    color: #000000;
    background: #ffff00;
    position: absolute;
    z-index: 100;
    padding: 15px;
}

 

And it appears like this: 

 

 

You should be able to define the colors of the popup (font and background) using the hex codes found here.

any idea why it does not update in my case?

perhaps I have CSS in wrong place or not referencing it correctly from the answer choice html?

 

any possibility of giving you access to my account to let you look under the hood?

Sure. Send me a private message with the account credentials and I can take a look. 

@Phillsh The problem wasn’t with the code, but with the layout. “Simple” isn’t compatible with all features of Qualtrics yet and that was blocking the CSS from working as intended. Generally, I recommend to my clients not to use the Simple layout and use one of the other three instead. Once I changed your layout to “Flat” the pop-up message worked as intended. 

 

 

WOW … so much to learn!

 

Thanks - how do I return the favor or recognize your expert status within Qualtrics?

 

Scott

@Phillsh Not a problem-this community is great and I learned a ton here when I was first getting started I’m just paying it back. 

 

As far as recognition, nothing to do with this one, but if you ever start a new thread of your own, you’ll just need to mark “Best Answer” when someone gets back to you. 

Thank you

Sorry, but back again.

I noticed that when I switched to Flat layout, I now get the white text on black background as you had explained.  But I am not able to replicate the black text on yellow background by updating the color codes as you showed earlier.

In other words, no mater which RGB hex codes I enter into the CSS custom code for color & background, I only get white text on black background.

any suggestions?

Update,

 

everything is working correctly on all of the questions except Q5.

 

Not a bit issue. I can live with it.

 

Thanks

Leave a Reply


Terms & Conditions