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

How do I add a bullet-point list to a tooltip/hover over?

  • September 25, 2023
  • 7 replies
  • 1187 views

Forum|alt.badge.img+1

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>

Best answer by Nam Nguyen

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

7 replies

Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • September 25, 2023

@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!


Forum|alt.badge.img+1
  • Author
  • September 25, 2023

Unfortunately that didn’t work. Thank you though!


Deepak
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+46
  • September 25, 2023

@fafawaka21 

Try this:

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


Hope it works!


Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • Answer
  • September 25, 2023

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


Forum|alt.badge.img+1
  • Author
  • September 25, 2023

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.


Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • QPN Level 8 ●●●●●●●●
  • September 25, 2023

@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


PeeyushBansal
Level 6 ●●●●●●
Forum|alt.badge.img+43
  • Level 6 ●●●●●●
  • April 14, 2025

@Nam Nguyen  do you have example that works on all mobiles as well and show text with “i” icon and a cross button