Is it possible to insert an HTML tooltip within Matrix Statements in Qualtrics across all browsers?

Question

This is my first post, so apologies if this question is not specific enough. I am creating a long survey in Qualtrics (most of the items of which are contained within matrix style questions) that will sometimes be taken by young teens. Because the questions being asked sometimes contain confusing wording, I have created tooltips in HTML to give additional context to the questions, so that younger respondents who may be confused by the wording can hover over a question mark icon to get additional information if desired.

Currently, there are several tool tips in the survey. Sometimes, the tool tip is inserted in the "Question" section of the matrix (i.e., the quetsion text at the top of the matrix), and sometimes, the tool tip is inserted in one of the statements of the matrix (i.e., the statements on the left hand side of the matrix).

My issue is that even when using the same exact code for the different tool tips, only the ones that are found in the question section of the matrix show the span title when using Internet Explorer and Safari. However, when using Chrome, both types of tool tips display the hoverover text. So, my question is, is there a way to get the span title to show regardless of the browser being used?

I am very new to HTML and am unsure why this is happening. I've included a preview survey for others to try, as well as the HTML I used to create the tool tip below.

Preview Survey Link: https://co1.qualtrics.com/jfe/preview/SV_025DzNles8BNYQR

HTML:

Test&nbsp;<span title="Hoverover text.">
<img src="https://qualtrics.com/(//this is the file path of the question mark icon uploaded to Qualtrics)" style="width: 15px; height: 20px;"/></span>

Any advice would be greatly appreciated. Thanks so much!

Answer 1

Edit the survey -> Look and Feel -> Advanced -> + Add Custom CSS

.myExpandItem
{
    text-decoration: underline;
    position: relative;
}

.myExpandItem:hover .myExpandBox {
    display: block;
}

.myExpandBox
{
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    min-height: 50px;
    width: 250px;
    display: none;
    left: -30px;
    top: 14px;
    padding: 10px;
    color: white;
    border-radius: 15px;
    font-size: 9.000000pt; 
    font-family: 'ArialMT';
}

Then edit the question HTML and add this HTML in your question text where you want the hover-over tooltip:

Sample text about <span class="myExpandItem">some kitten<span class="myExpandBox">A Kitten is a cute animal!</span></span> that we all love!