Mouse over/tool tip on question texts

Hi Martin,

A modern and mobile-compatible way to add tooltips over specific phrases in Qualtrics (or similar platforms) is to use a combination of HTML and basic inline CSS. Here’s a lightweight and updated approach that works on both desktop (hover) and mobile (tap):

 

<span style="position: relative; cursor: help;">
  term<span style="visibility: hidden; width: 160px; background-color: black; color: #fff; text-align: center; border-radius: 5px; padding: 5px 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s;"
  class="tooltip-text">This is your tooltip text</span>
</span>

<script>
document.querySelectorAll('span[style*="cursor: help"]').forEach(function(el) {
  const tooltip = el.querySelector('.tooltip-text');
  el.addEventListener('mouseenter', () => tooltip.style.opacity = 1);
  el.addEventListener('mouseleave', () => tooltip.style.opacity = 0);
  el.addEventListener('click', () => {
    tooltip.style.opacity = tooltip.style.opacity == 1 ? 0 : 1;
  });
});
</script>



 

If you want a pure CSS version, I can provide that too—but for mobile responsiveness, this version gives you more control without much CSS complexity.

Let me know if you’d like to see a reusable class-based version as well.

Thanks ​@rochak_khandelwal  I added your code to my question, but I think it’s not yet working as expected. So I do see a little question mark when hovering over the text, however no tooltip appears after that.

Any idea what’s going on (might it be related to the used theme or me NOT using this “new survey taking experience”?)?

In terms of design, I’d like to get sth. similar as described in my link above, i.e. the mouse over text shoudl get a small dashed underlining and the tooltip itself should appear as a colored box to the right (or below) of the question text.

Hi Martin — thanks for testing it out and reporting back.

If you’re seeing the hover icon but no tooltip appears, a couple of things might be interfering:

New Survey Experience: You're right to suspect this. Qualtrics' “new survey experience” sometimes restricts inline <script> execution or DOM manipulation. Try switching to the classic builder temporarily (if allowed in your account) to verify if the script works there. That’s usually the fastest way to confirm if it’s a platform-related block.
Question Text Sanitization: If you’re injecting the tooltip span directly into a question text field, Qualtrics might be stripping part of the HTML/JS silently (especially in the new builder). One workaround is to use a Text/Graphic question type instead of an actual question for testing—Qualtrics tends to interfere less there.
Selector Misfire: Qualtrics may inject additional styles that block or hide nested <span> content. You could try adding this to the tooltip CSS:

display: inline-block;

pointer-events: auto;
and test it again. Also confirm the tooltip span isn’t nested in an element with overflow: hidden.
On the design front:
For the effect you're describing—dashed underline and floating tooltip to the right—this can be tweaked. Here’s an updated version of the span styling you can use:
<span style="position: relative; border-bottom: 1px dashed #555; cursor: help; display: inline-block;">

  hover me

  <span style="visibility: hidden; background-color: #222; color: #fff; padding: 6px 10px; border-radius: 4px; position: absolute; top: 50%; left: 105%; transform: translateY(-50%); white-space: nowrap; opacity: 0; transition: opacity 0.3s; z-index: 10;"

  class="tooltip-text">This is your tooltip text</span>

</span>

Let me know if you still face any issue.

Interesting things going on.

So I’m NOT using the new survey taking experience, instead I’M using the old one.

Now, with your new html code, it would display the tooltop in the survey builder/edit mode, but it would NOT display it when previewing the survey or actually taking the survey…

I created a completely new survey without any other CSS code or JS or or things that could potentially interfere here.

This is how my code looks like in the question text:

<span style="position: relative; border-bottom: 1px dashed #555; cursor: help; display: inline-block;">

  hover me

  <span style="visibility: hidden; background-color: #222; color: #fff; padding: 6px 10px; border-radius: 4px; position: absolute; top: 50%; left: 105%; transform: translateY(-50%); white-space: nowrap; opacity: 0; transition: opacity 0.3s; z-index: 10;"

  class="tooltip-text">This is your tooltip text</span>

</span>

<script>
document.querySelectorAll('span[style*="cursor: help"]').forEach(function(el) {
  const tooltip = el.querySelector('.tooltip-text');
  el.addEventListener('mouseenter', () => tooltip.style.opacity = 1);
  el.addEventListener('mouseleave', () => tooltip.style.opacity = 0);
  el.addEventListener('click', () => {
    tooltip.style.opacity = tooltip.style.opacity == 1 ? 0 : 1;
  });
});
</script>

What you’re describing — tooltip showing in the builder but disappearing in preview/live mode — strongly suggests that Qualtrics is stripping out or blocking inline <script> tags during rendering for respondents. This behavior is specific to live/preview mode, and unfortunately quite common for embedded JS in the question text area.

Here’s what you can try: Move your JavaScript to the “Add JavaScript” section of the question instead of placing it inside the HTML in the question text box. Qualtrics will treat it more reliably there.

So your setup would be:

In the question text:

<span style="position: relative; border-bottom: 1px dashed #555; cursor: help; display: inline-block;">
  hover me
  <span class="tooltip-text" style="visibility: hidden; background-color: #222; color: #fff; padding: 6px 10px; border-radius: 4px; position: absolute; top: 50%; left: 105%; transform: translateY(-50%); white-space: nowrap; opacity: 0; transition: opacity 0.3s; z-index: 10;">
    This is your tooltip text
  </span>
</span>

In the JavaScript editor for that question:

Qualtrics.SurveyEngine.addOnload(function() {
  document.querySelectorAll('span[style*="cursor: help"]').forEach(function(el) {
    const tooltip = el.querySelector('.tooltip-text');
    el.addEventListener('mouseenter', () => tooltip.style.opacity = 1);
    el.addEventListener('mouseleave', () => tooltip.style.opacity = 0);
    el.addEventListener('click', () => {
      tooltip.style.opacity = tooltip.style.opacity == 1 ? 0 : 1;
    });
  });
});


Let me know if this version renders properly during preview or actual survey mode — it should now, since the script won’t be filtered out during runtime.

If not, we can switch to a :hover-based pure CSS fallback, though that loses mobile tap support.

Added it to the JS option of the question but with no success. Hoverbox does still not show up in the preview.

In other surveys I do have JS code activated there and it does work, so it’ probably not a problem of JS in general.

Could maybe the CSS code be wrong? I had another question going on here and was able to solve it with using a different span thingy:

Thanks for the follow-up, Martin.

Based on what you're seeing — script working in the builder but not in preview or live — I’d say you're absolutely right to suspect that Qualtrics is selectively blocking inline scripts or dynamic styles in runtime, even if JS is enabled globally.

Given that, your second approach using the title attribute might actually be the most robust path, especially since it:

works consistently in both builder and live survey,
requires no extra JavaScript or external styling,
supports piped text like title="${e://Field/business_unit}" directly.
You could absolutely adapt your original tooltip idea using something like:
<span title="This is your tooltip text" style="border-bottom: 1px dashed #555; cursor: help;">hover me</span>
 

Or for piped text:
<span title="${e://Field/business_unit}" style="border-bottom: 1px dashed #555; cursor: help;">business unit</span>

 

It’s simple, mobile-friendly, and doesn’t trigger any content blocking. The trade-off is you lose the ability to style the tooltip itself, but the stability you gain is probably worth it — especially when paired with piped values.

Let me know if you still want to try a fully styled version using only :hover and CSS ::after content, but this title-based one is probably your cleanest solution in Qualtrics.