AI Source Citations UI — HTML CSS JS Snippet

Retrieval-augmented generation (RAG) products live or die on trust, and trust comes from citations. Perplexity built a company on this interface; ChatGPT Search, Gemini, and every enterprise RAG tool followed with the same three-part anatomy this snippet implements: a row of source chips above the answer, superscript numbered markers inline in the text, and a hover preview card showing the source's title, domain, and the exact supporting quote. All of it is vanilla HTML, CSS, and JavaScript, structured so a real RAG backend can populate it directly.

Citation markers as real buttons, not spans

Each inline marker is a <button class="cite" data-src="N"> — a real button, so it is keyboard-focusable and screen-reader announced, styled to look like a superscript chip: vertical-align: super, 16px height, indigo-tinted background, 10px bold numeral. The data-src attribute carries the index into the SOURCES array, which is the entire wiring contract: the same index links markers, chips, and preview content. Markers respond to mouseenter/mouseleave *and* focus/blur with identical handlers, so keyboard users get the same preview experience as mouse users — the accessibility detail most citation UIs omit.

The hover preview card with quote excerpt

Hovering a marker opens a floating card: a coloured favicon tile with the source's initial, the domain, the article title, and — the piece that actually builds trust — the *supporting quote*, rendered italic behind an indigo left border like a pull quote. Showing the exact retrieved passage lets users verify a claim in one second without leaving the page; products that link to sources without quoting them push the verification cost back onto the user. In a production RAG system this quote is precisely the retrieved chunk that was fed to the model for that claim, so the UI doubles as an honesty check on your retrieval pipeline.

Positioning and the hover-intent gap

The preview positions itself above the hovered marker: horizontally centred on the marker via getBoundingClientRect() math relative to the wrapper, clamped into the wrapper's bounds so it never overflows, and flipped below the marker when there is no room above. Two timing details make it feel native rather than jumpy. First, hiding is delayed 150ms through a setTimeout stored in hideTimer — and the preview itself cancels that timer on mouseenter — so users can move the pointer from marker to card across the gap without the card vanishing (the classic hover-intent bridge). Second, show cancels any pending hide, so sweeping across several markers cross-fades content instead of flickering.

Two-way highlight linking

The subtle interaction that makes this UI feel considered: hovering citation ② lights up source chip 2, and hovering a chip lights every marker that cites it. One function, setActive(i, on), toggles an .active class across both collections filtered by data-src, giving users an instant visual answer to both "where does this claim come from?" and "which claims rest on this source?" — the second question being exactly what you ask when you distrust a source. Chips themselves show the numbered badge, domain, and an ellipsis-truncated title in a 180px max-width card.

The demo content — EV sales statistics with three sources — shows the realistic case of multiple claims citing the same source and one sentence citing two sources back-to-back. To integrate with a real system, your backend returns answer text with citation indices (as OpenAI and Anthropic tool-based RAG flows do), you render markers from those indices, and you fill SOURCES from the retrieval metadata: URL, title, and the retrieved chunk as the quote.