Можно ли вставлять HTML-подсказку в Matrix Statements в Qualtrics во всех браузерах?

Question

Это мой первый пост, поэтому извиняюсь, если этот вопрос недостаточно конкретный. Я создаю длинный опрос в Qualtrics (большинство предметов которого содержатся в вопросах матричного стиля), которые иногда могут принимать молодые подростки. Поскольку задаваемые вопросы иногда содержат запутанную формулировку, я создал всплывающие подсказки в HTML, чтобы дать дополнительный контекст этим вопросам, так что молодые респонденты, которые могут быть смущены формулировкой, могут навешивать значок значка вопроса, чтобы получить дополнительную информацию по желанию.

В настоящее время в опросе имеется несколько подсказок. Иногда подсказка инструмента вставляется в раздел «Вопрос» матрицы (т. Е. Текст quetsion в верхней части матрицы), а иногда подсказка инструмента вставляется в одно из утверждений матрицы (т. Е. операторов в левой части матрицы).

Проблема в том, что даже при использовании одного и того же точного кода для различных подсказок инструмента только те, которые находятся в разделе вопросов в матрице, отображают заголовок диапазона при использовании Internet Explorer и Safari. Тем не менее, при использовании Chrome оба типа подсказок показывают отображаемый текст. Итак, мой вопрос заключается в том, есть ли способ получить заголовок span для отображения независимо от используемого браузера?

Я очень новичок в HTML и не знаю, почему это происходит. Я включил предварительный просмотр для других, чтобы попробовать, а также HTML, который я использовал для создания подсказки ниже.

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> 

Любые советы будут оценены. Спасибо!

Answer 1

Редактировать опрос -> Внешний вид -> Дополнительно -> + Добавить пользовательские 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'; 
} 

Затем отредактируйте вопрос HTML и добавить этот HTML в тексте вопроса, где вы хотите парить-над подсказке:

Текст примера о <span class="myExpandItem">some kitten<span class="myExpandBox">A Kitten is a cute animal!</span></span>, который мы все любим!