How do I add a bullet-point list to a tooltip/hover over? | XM Community
Skip to main content

I’d like to add a bulleted list to a tooltip/hover over in the text of a Qualtrics survey question. Is there any way to do this?

 

I’m using the following, which of course doesn’t separate out the bullet points into separate lines:

 

<span class="tooltip" data-text="Here are a few examples: ● Example A, ● Example B, ● Example C, ● Example D">questions</span>

@fafawaka21 Try and write your HTML as below:

<span class="tooltip-trigger">Hover here to see examples</span>

<ul>
<li>Example A</li>
<li>Example B</li>
<li>Example C</li>
<li>Example D</li>
</ul>
</div>

Hope it helps!


Unfortunately that didn’t work. Thank you though!


@fafawaka21 

Try this:

<div title="
&#8226; Item 1
&#8226; Item 2
&#8226; Item 3
" class="visible">
Here are few example:
</div>


Hope it works!


Unfortunately that didn’t work. Thank you though!

<style type="text/css">
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}

.tooltiptext {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
top: 100%;
left: 0;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

.tooltiptext ul {
list-style-type: disc;
padding-left: 20px;
}
</style>

<div class="tooltip">QuestionTEXT
<span class="tooltiptext">
List Example
<ul>
<li>Example A</li>
<li>Example B</li>
<li>Example C</li>
</ul>
</span>
</div>

Try this


Unfortunately that didn’t work. Thank you though!

<style type="text/css">
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}

.tooltiptext {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
top: 100%;
left: 0;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

.tooltiptext ul {
list-style-type: disc;
padding-left: 20px;
}
</style>

<div class="tooltip">QuestionTEXT
<span class="tooltiptext">
List Example
<ul>
<li>Example A</li>
<li>Example B</li>
<li>Example C</li>
</ul>
</span>
</div>

Try this

This works, though needs some tweaks as it doesn’t fit on the page. In any case, thank you! I have something I can definitely get to work here.


@fafawaka21 Edit the code in somewhere else then copy paste it in your survey. Don’t use the Qualtrics editor, I tried and it keep auto adding class to the list


Leave a Reply