CitationHoverCard
StableA small number in a sentence that shows where a fact came from.
Also known as hover card, citation preview, link preview
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Inline in a sentence
Renewables supplied about a quarter of generation last year.
<p className="text-body leading-5">
Renewables supplied about a quarter of generation last year.
<CitationHoverCard n={1} title="Annual energy review 2025" domain="energy.example.gov"
url="https://example.com" snippet="Renewables supplied 24 percent of national generation, up from 21 percent the year before."
trust="Government" />
</p>Point at the number, tab to it, or tap it. Press Escape to close.
When to use it
A small number placed right after a fact that shows where it came from. The source card opens on pointing, tabbing or tapping, so checking a claim never needs a mouse.
Made of: Number · Site icon or first letter · Website · Trust label · Title · Short quote · Link to the source
Use it for
- A fact in an AI answer that comes from a web page or document.
- Showing a source's title, website, a short quote and a trust label without leaving the text.
Not for
- The full list of sources for an answer: use SourceList.
- A plain numbered link to a source, with no card: use CitationMarker.
- A source shown as a card of its own: use SourceCard.
Do and avoid
Bags are free up to 20 kg on this fare.
Bags are free up to 20 kg on this fare. Extra bags cost 30 euros each way.
Do
- Put the number right after the fact it supports.
- Show a trust label only when you have a real reason.
- Keep quotes short and taken straight from the source.
- Add a Sources list too, so every source is in one place.
Avoid
- Do not make pointing at it the only way to reach the source.
- Do not use a trust label as a score without saying how it is decided.
- Do not use it where the card would cover the text being read.
On a phone
- A tap opens the card and pins it. Tap the number again or tap outside to close it.
- The number is a small inline button. On touch screens it keeps its size and has a 44px tap area, so the line it sits in does not get taller.
- On a phone the card is fixed along the bottom of the screen, 1rem in from each side and above the bottom safe area, so it cannot run off the edge. The Open source link is small text with no 44px target.
Seen in products
- Perplexity shows numbered inline citations with a hover preview and trust labels such as Government, Academic and Trusted.
- Claude responses carry verifiable citations when web search is on.
- Google AI Overviews added hover link previews with description and image on citations.
- Vercel AI Elements ships Inline Citation and Sources components.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| nrequired | number | none | Citation number shown in the marker. |
| titlerequired | string | none | Source title. |
| domainrequired | string | none | Source domain. Part of the marker's accessible name. |
| urlrequired | string | none | Target of the open link. |
| snippet | string | none | Short excerpt, clamped to three lines. |
| trust | string | none | Trust label as text, such as Government or Academic. |
| favicon | ReactNode | none | Small mark for the source. Defaults to the first letter of the domain. |
| openLabel | string | "Open source" | Text of the link. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one CitationHoverCard switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| State | Hover, Pressed and Focus come from the browser. | Default, Hover, Pressed, Focus |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- hover
- Moving the pointer onto the number opens a source card above it, and leaving closes it.
- focus
- Focusing the number with the keyboard opens the card too.
- pinned
- Clicking the number keeps the card open until you click it again, click outside or press Escape.
Tokens
Change one of these and every part that uses it follows.
--accent-soft--accent-fg--surface-raised--border--shadow-lg--fg-muted--radius-overlay
Built in
- The number is a button named like "Source 1: energy.example.gov", and it tells screen readers whether the card is open.
- The card opens on pointing, on tabbing to it and on click. A click keeps it open, which is how touch screens use it.
- Escape closes the card and returns to the number. Moving focus away also closes it.
- The card's link can be reached with Tab, and the trust label is written in words.
What you need to do
- Also list every source in a Sources list, so people can reach them all without opening each card.
- Place the number right after the fact it supports, so the link between them is clear when read aloud.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide