Hover Card
Reveal supporting information alongside its trigger.
use blinc_cn as cn;
use blinc_layout::prelude::*;
pub fn hover_card_demo() -> Div {
div().class("demo-stack").class("demo-stack--center").child(
cn::hover_card(|| div().child(cn::button("@blinc").variant(cn::ButtonVariant::Ghost)))
.content(|| {
div().class("demo-profile").child(cn::avatar().fallback("BL")).child(
div()
.class("demo-profile-copy")
.child(text("Blinc").class("demo-label"))
.child(text("Build something worth interacting with.").class("demo-caption")),
)
})
.open_delay_ms(200),
)
}
@layer components {
.cn-hover-card-content {
font-family: var(--font-sans);
}
.cn-hover-card-content {
background: var(--surface-elevated);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-primary);
box-shadow: var(--shadow-md);
padding: var(--space-4);
animation: cn-hover-card-enter var(--duration-normal) var(--ease-spring);
transform-origin: top center;
}
@keyframes cn-hover-card-enter {
from {
opacity: 0;
transform: scale(0.96) translateY(-4px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
}
Usage and properties
Reveal supporting information alongside its trigger. Apply CSS after the component layer to restyle the documented parts.
Use the installation guide to add blinc_cn and its component stylesheet. Create the fixture bindings once, and return the demo from your UI builder. Values marked Bound accept Signal/Computed sources where the API supports them; structural options configure the component at construction.
| Property | Type | Update model | This example |
|---|---|---|---|
content | child builder | Construction | Blinc profile |
open_delay_ms | u64 | Construction | 200 |
Keyboard and interaction
Use the pointer to explore the control.
Customizing it
Add application CSS after the default component layer. These selectors are the restyling surface for this component:
.cn-hover-card-content
Theme and component variables: --primary, --text-primary, --text-secondary, --surface, --border, --radius-default, --duration-fast, --ease-state.
Built-in themes
The Live theme control installs Blinc's own theme bundles, including their colours, focus rings, corner shapes and motion tokens.
pub fn theme_bundle_for(name: &str) -> blinc_theme::ThemeBundle {
match name {
"restrained" => blinc_theme::RestrainedTheme::bundle(),
"expressive" => blinc_theme::ExpressiveTheme::bundle(),
_ => blinc_theme::HybridTheme::bundle(),
}
.with_css(blinc_cn::cn_styles::CN_STYLES)
}Download the default widget and component stylesheets. Sample assets and licenses are available in the asset guide.
Documentation
From the canonical component guide.
A hover card takes trigger and content builders returning Div:
hover_card(|| div().child(text("@jane")))
.content(|| {
div().flex_row().gap(3.0)
.child(avatar().fallback("JD").size(AvatarSize::Large))
.child(div().flex_col().gap(1.0)
.child(text("Jane Doe").weight(FontWeight::Bold))
.child(muted("Software developer")))
})
.side(HoverCardSide::Bottom)
.align(HoverCardAlign::Start)
Its popup is .cn-hover-card-content. .open_delay_ms(..) and
.close_delay_ms(..) tune the interaction delays.
Platforms and version
The component API is available in Blinc 0.6.0. The Live example runs in a dedicated worker and requires a compatible GPU surface. Preview and Code remain available when Live cannot start. The canvas has a descriptive label; a full screen-reader DOM mirror is not provided. The gallery integration is based on revision e2e55c24e078.
Recordings and live demos use the default Hybrid theme with bundled Noto Sans. The recording uses a 560 × 320 logical viewport at twice that resolution. Live follows its container and actual display density. Source base revision · Exact build source · Artifact versions and checksums · Font license.