Adding hover over for matrix table choice/response | XM Community
Solved

Adding hover over for matrix table choice/response

  • 16 February 2022
  • 37 replies
  • 2323 views
Show first post

37 replies

Phillsh
Rank
Badge +5

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

jmborzick
Rank
Userlevel 6
Badge +33

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

Phillsh
Rank
Badge +5

@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

jmborzick
Rank
Userlevel 6
Badge +33

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

Phillsh
Rank
Badge +5

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?

jmborzick
Rank
Userlevel 6
Badge +33

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

jmborzick
Rank
Userlevel 6
Badge +33

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

 

 

Phillsh
Rank
Badge +5

WOW … so much to learn!

 

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

 

Scott

jmborzick
Rank
Userlevel 6
Badge +33

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

Phillsh
Rank
Badge +5

Thank you

Phillsh
Rank
Badge +5

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?

Phillsh
Rank
Badge +5

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