Learn how to automatically show a definition on hover for technical terms in your Webflow articles.
In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to automatically display a definition on hover for technical terms in your Webflow articles, no plugin needed.
Example
Hover over the purple underlined terms
To improve your CROConversion Rate Optimization: optimizing conversion rates., start by auditing your SEOSearch Engine Optimization: optimizing for search engines. technical setup. Keep an eye on your CTRClick-Through Rate: the click rate on a link or ad. in Search Console and your LCPLargest Contentful Paint: a Core Web Vitals loading speed metric. and CLSCumulative Layout Shift: a page visual stability metric. metrics. Also think about GEOGenerative Engine Optimization: visibility in AI tools like Perplexity or ChatGPT. if you want to show up in AI answers. Manage your content through a CMSContent Management System: a content management system. like Webflow to publish quickly.
| Term | Displayed definition | Customizable |
|---|
| CRO | Conversion Rate Optimization... | Yes, in the JS table |
| GEO | Generative Engine Optimization... | Yes |
| LCP | Largest Contentful Paint... | Yes |
| Any custom term | Your definition | Yes, add an entry |
1. Add the class to your article area
On the Div that contains your Rich Text, add the article-content class. The script only looks for terms in this area, not in the navbar or footer.
2. Customize the glossary
Update the glossary table in the script with your own terms and definitions. The script automatically detects matches in the text.
3. Add the script in Footer code
(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);
}
});
});
})();
good to know
The script uses a TreeWalker to scan text nodes without breaking the existing HTML. Avoid adding terms that are too short (1-2 letters) or too common: they could match in unwanted contexts. Always test in preview before publishing.
Conclusion
An inline glossary improves understanding and reduces bounce rate on technical articles. Use cases:
- SEO/marketing articles with technical jargon
- Product or SaaS documentation
- Beginner guides with industry terms
.avif)
