Qualtrics Pop up buuble

Question

В Qualtrics кто-то знает, как вставить всплывающий пузырь на страницу, чтобы респонденты могли пронести по пузырю и посмотреть дополнительную информацию?

Answer 1

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

<div title="This is additional Information">Here is text, hover over me for more information.</div>

Есть «любитель» способы сделать это, но многие люди потратили время на совершенствовании этих методов, поэтому я бы рекомендовал использовать некоторые подсказки библиотеку, если вы хотите сделать это по-любимому.

Answer 2

Вам необходимо настроить всплывающую подсказку во время опроса.

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

<a href="javascript:void(0)" class="tip">Text to response to pop-up<span> 
This is the text that will display in the tooltip pop-up.</span></a> 

Чтобы сделать подсказку отреагированной, добавьте нижеприведенный CSS-код к опросу. В Qualtric, перейдите «Смотри & Feel»> «Дополнительно»> «+ Custom CSS» и добавьте следующий код CSS:

/* Tooltip container */ 
.tip{ 
position: relative; 
display: inline-block; 
cursor: help; /*change the cursor symbol to a question mark on mouse over*/ 
color: inherit; /*inherit text color*/ 
text-decoration: none; /*remove underline*/ 
} 

/*Tooltip text*/ 
.tip .tipText{ 
visibility: hidden; 
width:28em; 
text-align: left; 
padding: .6em; 
padding-left: 1em; 
border: 1px solid [template("base font color")]' 
border-radius: 0.5em; 
font: 400 12px Arial; 
color: #fff; /*white*/ 
background-color: #404040; /*grey*/ 
display: inline-block; 

/*Position the tooltip text*/ 
position: absolute; /*positioned relative to the tooltip container*/ 
top: -5px; 
left: 105%; 
z-index: 100; 
} 

Мой ответ сильно заимствована из SurveyGizmo-х documentation page, но я нашел способ заставить его работать для моего опроса в Qualtrics.

Вы можете настроить цвет и шрифт вашего текста, всплывающий фон пузыря и границу, отредактировав код CSS.

Answer 3

Чтобы заставить его работать правильно, мне нужно было добавить hover CSS, и я использовал диапазон, а не специальный вызов класса.

/* Tooltip container */ 
.tip{ 
position: relative; 
display: inline-block; 
cursor: help; /*change the cursor symbol to a question mark on mouse over*/ 
color: red; 
float: right; 
font-style: bold; 
text-decoration: none; /*remove underline*/ 
} 

/*Tooltip text*/ 
.tip span { 
visibility: hidden; 
width:80%; 
text-align: left; 
padding: .6em; 
padding-left: 1em; 
border: 1px solid [template("base font color")]' 
border-radius: 0.5em; 
font: 400 12px Arial; 
color: #fff; 
background-color: #404040; 
display: inline-block; 

/*Position the tooltip text*/ 
position: fixed; 
bottom: 20px; 
left: 10%; 
z-index: 100; 
} 

.tip:hover span { 
    visibility: visible; 
}