How to Show Definitions on Hover for Technical Terms in Webflow

(function() {
  var glossary = {
    'CRO': 'Conversion Rate Optimization : optimizing conversion rates.',
    'GEO': 'Generative Engine Optimization : visibility in AI tools like Perplexity or ChatGPT.',
    'SEO': 'Search Engine Optimization : optimizing for search engines.',
    'CMS': 'Content Management System : a content management system.',
    'CTR': 'Click-Through Rate : the click rate on a link or ad.',
    'ROAS': 'Return On Ad Spend : return on ad spend.',
    'LCP': 'Largest Contentful Paint : a Core Web Vitals loading speed metric.',
    'CLS': 'Cumulative Layout Shift : a page visual stability metric.',
  };

  var style = document.createElement('style');
  style.textContent = '.glossary-term { border-bottom: 1px dashed #a78bfa; cursor: help; position: relative; }' +
    '.glossary-tip { position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%);' +
    'background: #111; color: #fff; padding: 8px 12px; border-radius: 8px; font-size: 13px;' +
    'white-space: normal; min-width: 200px; max-width: 280px; z-index: 999; line-height: 1.5;' +
    'opacity: 0; pointer-events: none; transition: opacity 0.2s; }' +
    '.glossary-term:hover .glossary-tip { opacity: 1; }';
  document.head.appendChild(style);

  var content = document.querySelector('.article-content') || document.body;
  var walker = document.createTreeWalker(content, NodeFilter.SHOW_TEXT);
  var nodes = [];
  while (walker.nextNode()) nodes.push(walker.currentNode);

  nodes.forEach(function(node) {
    var text = node.textContent;
    Object.keys(glossary).forEach(function(term) {
      if (text.includes(term) && node.parentElement.tagName !== 'SCRIPT') {
        var span = document.createElement('span');
        span.innerHTML = text.replace(new RegExp('\b' + term + '\b', 'g'),
          '' + term +
          '' + glossary[term] + '');
        node.parentNode.replaceChild(span, node);
      }
    });
  });
})();