Glimpse
glimpseDisplays a compact delayed preview of referenced content near its trigger.
Usage
Link preview
Hover the inline link to pop up a preview card: cover image + title + description + domain name. When href is passed in, the trigger renders it as an external link.
Our design system is based on Semantics token Build, hover the link to preview.
<p>
Our design system is based on {" "}
<Glimpse
href="https://hulian.example.com/tokens"
image={coverUrl}
title="Hulian Design Token"
description="A set of semantic color/spacing/rounding variables, with light and dark modes available out of the box."
>
Semantics token
</Glimpse>{" "}
Build, hover the link to preview.
</p>Plain text term
When image / href is not passed, it degrades to a pure terminology explanation card (no cover, no domain name), and the trigger is span in the line.
This is a dogfood . Details of
<p>
This is a {" "}
<Glimpse title="Dogfood" description="I use my own products. The documentation site is all built with @hulianui/ui's own components.">
dogfood
</Glimpse>{" "}
.
Details of
</p>Multiple side by side
Multiple inline links in the same paragraph are previewed independently without interfering with each other.
Recommended reading Component Overview,Theme customization Two articles.
<p>
Recommended reading{" "}
<Glimpse href="https://example.com/a" image={coverA} title="Component Overview" description="160+ component classification index.">
Component Overview
</Glimpse>
,
<Glimpse href="https://example.com/b" image={coverB} title="Theme customization" description="Change one thing token Site-wide reskin ">
Theme customization
</Glimpse>{" "}
Two articles.
</p>When to use
Use Glimpse to show a Wikipedia-style cover, title, description, and domain preview when readers hover a link or term without interrupting the article. Use HoverCard for completely custom content or Tooltip for short text. With href, the trigger is an external link opened in a new tab and the card shows its domain; without it, the trigger remains an inline span.
Import
import { Glimpse } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| image | string | — | Cover image URL. |
| href | string | — | Destination. When present, renders an external-link trigger and shows the domain. |
| side | "top"|"right"|"bottom"|"left" | "bottom" | Preferred popup side. |
| align | "start"|"center"|"end" | "center" | Alignment along the trigger. |
| openDelay | number | 300 | Opening delay in milliseconds. |
| closeDelay | number | 150 | Closing delay in milliseconds. |
| className | string | — | Trigger class name. |
| contentClassName | string | — | Preview-card class name. |
Slots
| Slot | Type | Description |
|---|---|---|
| children* | ReactNode | Inline trigger text or term. |
| title | ReactNode | Preview title. |
| description | ReactNode | Multiline-clamped preview description. |
Example
<p className="max-w-md leading-7 text-foreground">
Our design system is built with{" "}
<Glimpse href="https://hulian.example.com/tokens" image={cover} title="Hulian design tokens" description="Semantic color, spacing, and radius variables with light and dark themes out of the box.">
semantic tokens
</Glimpse>{" "}
that can be previewed on hover.
</p>Usage guidelines
- Documentation gates prohibit remote images. In showcases and demos, use a local asset or SVG data URI for
image. - Without
href, the trigger is a non-navigatingspansuited to definitions. Providehrefwhen it must navigate. - Hover protection follows HoverCard's
openDelayandcloseDelay; do not set both to zero.
Related
Playground
Hover to view This link
<Glimpse href="https://example.com" image={cover} title="Title" description="Description">
Link text
</Glimpse>