Snippet
Source Citations
Perplexity-style inline markers with hover preview cards. Builds trust in AI-generated answers.
Last updated: October 2026
What this snippet does: Adds numbered superscript markers to text, each showing a hover card with the source title, URL, and snippet. Essential for RAG apps, AI search engines, and any AI tool where trust matters.
🎬 Live Demo
Hover or tap the small blue markers.
JavaScript was created by Brendan Eich at Netscape in 19951
JavaScript — History
en.wikipedia.org/wiki/JavaScript;
Brendan Eich created JavaScript in 10 days in May 1995 while working at Netscape Communications.
. It was standardized as ECMAScript in 19972
ECMAScript — Standard
ecma-international.org/ecma-262/;
ECMA-262 is the standard specification for the ECMAScript language, first published in June 1997.
. Modern JavaScript runs in every browser and Node.js3
Node.js Official Site
nodejs.org
Node.js is a JavaScript runtime built on Chrome's V8 engine for building scalable network applications.
.
📝
How It Works
Each citation is a superscript number with a hidden tooltip card that appears on hover. The card is a child of the citation element, so CSS handles the reveal with no JS.
1
HTML
Some text with a citation
<a class="citation" href="#">1
<span class="citation-card">
<span class="cc-title">Source Title</span>
<span class="cc-url">example.com</span>
<span class="cc-snippet">A short excerpt...</span>
</span>
</a>.
2
Core CSS
.citation {
position: relative;
display: inline-flex;
width: 16px; height: 16px;
background: #1e40af; color: #93c5fd;
border-radius: 4px;
vertical-align: super;
}
.citation-card {
position: absolute;
bottom: calc(100% + 8px);
left: 50%; transform: translateX(-50%);
width: 280px;
opacity: 0;
transition: opacity 0.15s;
}
.citation:hover .citation-card { opacity: 1; }
3
JavaScript — Render from Data
function renderWithCitations(text, sources) {
return text.replace(/\[\d+\]/g, match => {
const n = parseInt(match.slice(1, -1));
const src = sources[n - 1];
return `<a class="citation" href="${src.url}">${n}
<span class="citation-card">
<span class="cc-title">${src.title}</span>
<span class="cc-url">${src.displayUrl}</span>
<span class="cc-snippet">${src.snippet}</span>
</span>
</a>`;
});
}🎯 Use Cases
- AI search engines — Perplexity, You.com style answers
- RAG apps — Chatbots that cite documents
- Research assistants — Paper summarizers with links
- Compliance tools — Legal/medical AI where sources matter
⚠️ Common Mistakes
- Tooltips clipped by overflow. The card escapes the text container — allow
overflow: visible. - No mobile support. Hover doesn't work on touch. Use
clickto toggle on mobile. - Unsanitized URLs. Always validate
hrefvalues from AI output. - No fallback. Link should still work as a plain anchor if CSS fails.