Hover-over text not showing

gillisjagillisja TorontoCommunity Member Qubie ✭
edited October 16 in Custom Code

Hover-over text not showing

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

Best Answer

  • KeirJKeirJ Guru ✭✭
    Accepted Answer

    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.

Answers

Sign In to Comment