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


Terms & Conditions