Adding hover over for matrix table choice/response

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