Overview
How might we design citation tooltips so people can trust and act on AI output?
When this pattern fits
- Essential for AI-powered search engines, research assistants, and knowledge tools where source verification and transparency are critical for user trust.
When to skip or lighten it
- Touch-first mobile where hover does not exist; prefer tap-to-expand or a sources sheet.
- Answers with one collective sources list and no claim-level markers.
- Surfaces where tooltip chrome overlaps critical reading and a side panel is cleaner.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Empty tooltips that only repeat the domain with no excerpt.
Hover-only access with no keyboard or tap equivalent.
Mismatched excerpts that do not support the cited sentence.
Tooltips that auto-navigate away from the answer on accidental hover.
How products use it
| Product | Implementation |
|---|---|
| ChatGPT | Inline citation chips open claim previews and source details. |
| Perplexity | Numbered citations with rich hover/focus previews into sources. |
| Google AI Overviews | Markers that expand into supporting source cards. |
| Bing Copilot | Inline footnotes with source snapshots on interaction. |
Real-world examples
How shipped products implement citation tooltips, from our teardown guides.
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Citation Tooltips" AI interface design pattern.
Pattern Definition:Frequently asked questions
What are citation tooltips in AI answers?
Citation tooltips show a source preview when users hover or focus an inline citation marker, so they can check a claim without leaving the answer.
How do citation hovers relate to a source browser?
Hovers are lightweight claim-level previews. A source browser is a persistent pane for deeper reading. Many research UIs use hover for glance checks and a panel for full documents.
Do citation tooltips work on mobile?
Hover does not. Mirror the same preview on tap or long-press, or route to a sources bottom sheet so mobile users get equal verification.