Lets actors assess whether a linked destination is worth visiting before committing to the navigation — a low-cost probe that reduces the penalty of following a wrong link and encourages exploration.
In a dense knowledge base, every link is a fork in attention. Clicking commits the actor to a context switch; previewing lets them sample the destination while preserving their reading position. The result is faster triage: follow the link, skip it, or file it for later — all from a single hover.
Forces
- Curiosity vs commitment — actors want to know what a link leads to, but navigating away breaks flow
- Density vs navigability — richly cross-referenced content benefits from lightweight access to context without requiring full navigation
- Speed vs depth — the preview should load fast and show just enough to decide, not replicate the full page
Behaviour
A preview appears after a brief hover intent delay (typically 300–400 ms), filtering out accidental cursor passes. The preview surface is hoverable — the actor can move the cursor into it to read longer text or follow links within it. Leaving both the trigger and the preview dismisses it after a short grace period.
Keyboard actors reach the same preview via focus. Escape closes it.
On touch devices the preview is suppressed; tap navigates directly, since there is no hover channel to exploit.
Content
The preview surface shows the destination’s title and opening paragraph — enough to establish what the pattern is about without reproducing the full page. If the target is already cached (from a prior visit or an earlier preview), the preview appears instantly.
Avoid loading interactive components, media, or deep content trees into the preview. Its purpose is orientation, not immersion.
Relationship to navigation
Link preview and stacked-note navigation form a natural pair:
- Hover = peek (low commitment, reversible)
- Click = stack (higher commitment, opens alongside)
- Modifier-click = new tab (full commitment, separate context)
The preview acts as the first tier of progressive disclosure for cross-references: sample, then open, then read.
Anti-patterns
- Preview as crutch for bad link text — if actors need to preview every link to understand the page, the surrounding prose is doing too little work
- Overstuffed previews — cramming full sections into the preview defeats the purpose; keep it to title and lede
- No escape hatch — previews must close on Escape and on scroll, and must never block interaction with the underlying page
- Touch hover emulation — long-press-to-preview adds latency and confuses the tap model; skip it
Related components
- Popover — the surface primitive; link preview is one specific application of its hover/focus mode
- Reference — references reify connections as first-class entities; their preview escalation (hover → detail → full view) is one application of the link preview move within that broader pattern
Resources & references
- Wikipedia Page Previews — the interaction model for hovering over internal wiki links
- Obsidian Page preview — hover preview in a linked-notes context
Related patterns
Enacts
- Learnability — previews help actors build a mental map of the knowledge base without navigating away from their current reading
- Density — by deferring full content to hover, preview lets dense cross-referencing exist without overwhelming the page
Complements
- Dynamic hyperlinks — inferred links benefit even more from preview, since actors have less prior expectation of where they lead
- Deep linking — when a link targets a specific section, the preview can scroll to and highlight the anchored fragment
Tangentially related
- Annotation — previews can surface annotation layers attached to a linked destination
- Progressive disclosure — hover-to-peek at a linked destination; the lightest disclosure tier for cross-references