Tooltip
Explain a control with a short hint on hover.
use blinc_cn as cn;
use blinc_layout::prelude::*;
pub fn tooltip_demo() -> Div {
div().class("demo-stack").class("demo-stack--center").child(
cn::tooltip(|| div().child(cn::button("Hover for a hint").variant(cn::ButtonVariant::Outline)))
.text("Your work is saved automatically.")
.open_delay_ms(200),
)
}
@layer components {
.cn-tooltip {
font-family: var(--font-sans);
}
.cn-tooltip {
line-height: var(--leading-normal);
}
.cn-tooltip {
background: var(--cn-tooltip-bg, var(--tooltip-bg));
color: var(--cn-tooltip-text, var(--tooltip-text));
border-radius: var(--radius-sm);
font-size: var(--text-xs);
padding: var(--space-1-5) var(--space-3);
box-shadow: var(--shadow-sm);
animation: cn-tooltip-enter var(--duration-fast) var(--ease-out);
transform-origin: bottom center;
}
.cn-tooltip--bottom {
transform-origin: top center;
}
.cn-tooltip--left {
transform-origin: right center;
}
.cn-tooltip--right {
transform-origin: left center;
}
@keyframes cn-tooltip-enter {
from {
opacity: 0;
transform: scale(0.96);
}
to {
opacity: 1;
transform: scale(1);
}
}
}
Usage and properties
Explain a control with a short hint on hover. 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 |
|---|---|---|---|
text | string | Construction | Your work is saved automatically. |
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-tooltip
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.
Pass a trigger builder and supply its text:
tooltip(|| div().child(button("Hover me")))
.text("More information about this action")
.side(TooltipSide::Top)
TooltipSide has Top (the default), Bottom, Left and Right.
.align(..), .offset(..), .open_delay_ms(..) and .close_delay_ms(..)
control placement and timing. The text accepts a Signal or Computed:
let hint = ctx.use_signal("Ready to upload".to_string());
tooltip(|| div().child(button("Upload"))).text(hint)
The popup uses .cn-tooltip and a side class such as .cn-tooltip--top.
Its look comes from CSS. There is no configurable arrow part.
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.