Hover-over text not showing | XM Community
Solved

Hover-over text not showing

  • 16 October 2019
  • 3 replies
  • 73 views

Hi there,

I am in desperate need of help.

I'm trying to create hover over text for a set of survey responses. I've used the "span title" code - when I preview the survey and hover over on the mobile side, it does show the hover text. But it is not showing it on the computer preview side? They also do show up in the survey editor.

Please help me!

Thanks in advance,

Jackie
icon

Best answer by KeirJ 17 October 2019, 04:34

View original

3 replies

Userlevel 4
Badge +7
Try using the 'Rich Content Editor' to add the following code to the text you want a hover-over tip to appear.

```
<style type="text/css">/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me <span class="tooltiptext">Tooltip text</span></div>
```

I added this to question text as seen in the screenshot below.
Userlevel 4
Badge +7
!
Userlevel 4
Badge +7
!

Leave a Reply