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

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

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

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

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

Ссылка на предварительный опрос: 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>

Мы будем очень признательны за любые советы. Огромное спасибо!


person Ryan    schedule 23.12.2016    source источник


Ответы (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>, которого мы все любим!

person BrianCanFixIT    schedule 06.07.2017