Hover graphic or hover text html

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.