Adding Responsive Tooltips That Work on Mobile Devices

Hello jflowers1
I added the same code and was able to view the tooltip on mobile. Adding the screenshot below. Not sure where you went wrong.

Hi there, I was also able to get the hover text to display on mobile with the code you posted. I have also used a purely CSS+Html tooltip solution before that I liked. I found it here. Options for small, medium, large, xlarge, and fit to element tooltips. Displays as a button to press which I liked for mobile. QSF below if interested.
HoverText_Different_Sizes.qsf

Hello, I had to download jquery for it to work. Kate 

Where can I find the code that gave the result displayed, ​@Tom_1842 ? I thought there is a link under HoverText_Different_Sizes.qsf but there isn’t sadly.

Hi ​@SomeoneTryingTobeGoodinQ , my previous post was affected by the community migration a while back. I've attached that QSF below, but I also recommend checking out the other attachment. It contains a responsive tooltip that works on mobile devices in the New Survey Taking Experience without jQuery. You can try it here:

NSTE Mobile Tooltip

In both examples, edit the tooltip content using the Rich Content Editor's Source ("<>") view.

Amazing, thanks a bunch! 

While you had written, I made my own version, and I’d like to share it, too: 

LINK TO PREVIEW

In the question, in HTML view use it like this: 

&hellip; question text&nbsp;<button aria-expanded="false" class="info-btn" data-info="[b]Bolded text[/b] visible when clicking info." type="button">Info</button>

In the header (of the survey, under look & feel) set: 

 <!-- // For TOOLTIPS: -->
<script>
      (function() {
        var tip = null, owner = null;
        // Turns "[b]bold[/b] [i]italic[/i] [br]" into safe DOM nodes (no innerHTML)
        function renderMarkup(text, parent) {
          var parts = text.split(/(\[\/?b\]|\[\/?i\]|\[br\])/i);
          var bold = false, italic = false;
          parts.forEach(function(part) {
            var p = part.toLowerCase();
            if (p === '[b]') bold = true;
            else if (p === '[/b]') bold = false;
            else if (p === '[i]') italic = true;
            else if (p === '[/i]') italic = false;
            else if (p === '[br]') parent.appendChild(document.createElement('br'));
            else if (part !== '') {
              var node = document.createTextNode(part);
              if (italic) { var i = document.createElement('em'); i.appendChild(node); node = i; }
              if (bold)   { var b = document.createElement('strong'); b.appendChild(node); node = b; }
              parent.appendChild(node);
            }
          });
        }
        function close() {
          if (tip) { tip.remove(); tip = null; }
          if (owner) {
            owner.setAttribute('aria-expanded', 'false');
            owner.removeAttribute('aria-describedby');
            owner = null;
          }
        }

        function open(btn) {
          close();
          tip = document.createElement('div');
          tip.className = 'info-tip';
          tip.id = 'info-tip';
          tip.setAttribute('role', 'tooltip');
          renderMarkup(btn.getAttribute('data-info') || '', tip);

          // Use the same font as the survey theme
          var skin = btn.closest('.Skin') || document.body;
          tip.style.fontFamily = window.getComputedStyle(skin).fontFamily;

          document.body.appendChild(tip);

          btn.setAttribute('aria-expanded', 'true');
          btn.setAttribute('aria-describedby', 'info-tip');
          owner = btn;

          var r = btn.getBoundingClientRect();
          var w = tip.offsetWidth, h = tip.offsetHeight;
          var left = r.left + r.width / 2 - w / 2;
          left = Math.max(8, Math.min(left, document.documentElement.clientWidth - w - 8));
          var top = r.top - h - 8;
          if (top < 8) top = r.bottom + 8;

          tip.style.left = (left + window.pageXOffset) + 'px';
          tip.style.top  = (top + window.pageYOffset) + 'px';
        }

        document.addEventListener('click', function(e) {
          var btn = e.target.closest && e.target.closest('.info-btn');
          if (!btn) return;
          e.preventDefault();
          if (owner === btn) close(); else open(btn);
        });

        document.addEventListener('pointerdown', function(e) {
          if (!tip) return;
          if (e.target.closest('.info-tip') || e.target.closest('.info-btn')) return;
          close();
        });

        document.addEventListener('keydown', function(e) { if (e.key === 'Escape') close(); });
        window.addEventListener('resize', close);
      })();
</script>

And for my personal design, set this in the look and feel under the custom CSS:

.info-tip {
    position: absolute;
    z-index: 99999;
    max-width: 320px;
    box-sizing: border-box;
    background: #ffffff;
    color: #525252;
    border: 1px solid #817f84;
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
  }