Qualtrics弹出buuble

Question

在Qualtrics中，有人知道如何在页面上插入弹出式气泡，以便受访者可以刷过气泡并查看其他信息吗？

Answer 1

您需要在调查中将鼠标悬停在工具提示上。

在源模式下编辑，将此代码添加到您希望工具提示显示的位置。

<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中，转到'Look＆amp;感觉'＆gt; '高级'＆gt; '+ 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 2

为了让它正常工作，我需要添加悬停CSS，我使用span而不是特定的类调用。

   /* 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;
}

Answer 3

我认为您正在寻找的内容称为工具提示，一种简单的方法是向包含该元素的div添加标题。与此类似：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

有＆＃34;发烧友＆＃34;这样做的方法，但许多人花时间完善这些方法，所以我建议使用一些工具提示库，如果你想以更高级的方式做到这一点。