Hover graphic or hover text html | XM Community
Skip to main content

I have a text only question (no response requested, just intro text presented) for which I want to allow hover over a specific word to bring up additional text.  I found the code to use in these forums (below) but it seems to have a character limit as it doesn’t show all the text.  It may be better for me to save the hover text as a graphic and instead have the graphic pop up in hover.  Is this possible?  Or maybe there is a way to change the # characters in the hover text.  I think the graphic option is better though so I can visually break up the text and bold where needed. 

Additionally, when I use the hover html code below, it is placing the word I am hovering over on its own line rather than keeping it in the same paragraph stream. See attached picture - the text I want to hover over is simply the word ‘here’ and it is forced onto its own line rather than keeping within the sentence. 

<div title="This is hover-over information">Hover over this text</div>

Try using span instead of div:

<span title="This is hover-over information">Hover over this text</span>

 

Span allows the word being hovered over to be in line with the rest of the text.  Div inserts a line break.

The longest hover over text I’m using is 199 characters long.  I’ve tested up to about 1,000 characters - it worked but is clunky because it is so big.  The title attribute does not support images - you’d need HTML and CSS/JS for that.

That worked - but it looks like the character cap is 1025 and I have about 1677.  I am seeing other threads about css code to format and lengthen hover over text or make it accessible as a button to click on instead, but I am uncertain how how/where to paste all that and how to pursue.  I am sure it is relatively easy but without specific guidance it will end up taking more time than it is worth.

Hi ​@yve872 

Using ChatGPT and some testing, it seems possible to adjust the hover text to have more than 1025 characters using the code below:

<style type="text/css">.tooltip {
      position: relative;
      display: inline-block;
      cursor: help;
    }

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 500px; /* How wide the hover text should be, please adjust accordingly */
      max-height: 700px; /* The height the hover text will show before one is required to scroll, please adjust accordingly  */
      overflow-y: auto; /* scroll */
      background-color: #333;
      color: #fff;
      padding: 10px;
      border-radius: 5px;
      position: absolute; 
      z-index: 0;
      top: 100%; /* Immediately below, please adjust accordingly to shift it vertically*/
      left: 250%; /* please adjust accordingly to shift it horizontally*/
      transform: translateX(-50%);
      margin: 10px; /* Space below the main text */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      opacity: 0;
      transition: opacity 0.3s;
      white-space: normal;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
</style>
/* Please change the Hover text for your case */
<span class="tooltip">Hover over this text <span class="tooltiptext"> Hover text</span> </span>

However,

1) this may look a little awkward in your survey builder due to the absolute position.

2) it may require a lot of manual tweaking to get to the correct position that you want.

3) the hover text may be cut off by the next page line if there is not enough “space” between the text to hover and next page line.

 

Thank you for this, unfortunately it is taking too long for me to figure out how to adapt on my end so we will just try to come up with a shorter version of what we want to display that does fit in # characters.

 

Leave a Reply


Terms & Conditions