Tooltip
ui.widgets.TooltipKurze ergänzende Hinweise für Bedienelemente.
BEHAVIOR CONTRACT
Vier Platzierungen, Hover-Verzögerung, Portal-Ebenen und Schließen beim Verlassen, ohne den Layoutbaum anzutasten.
RECORDED INTERACTION
Der virtuelle Cursor fährt über den Top-Trigger und die Blase erscheint.
// ── Tooltip ──
pub fn buildTooltip(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
const a = cx.allocator;
const c = try col(cx, 12);
try c.appendChild(a, try label(cx, "Hover a button to see the tooltip (4 positions)"));
// 四个主方向各一个 trigger,间距大些避免弹层重叠。
const grid = try ui.box(cx, .{ .direction = .row, .gap = 24, .align_items = .center }, .{});
const positions = [_]struct { p: W.tooltip.TooltipPosition, t: []const u8 }{
.{ .p = .top, .t = "Top" },
.{ .p = .bottom, .t = "Bottom" },
.{ .p = .left, .t = "Left" },
.{ .p = .right, .t = "Right" },
};
inline for (positions) |spec| {
const tt = try W.Tooltip(.{ .text = spec.t ++ " tooltip", .position = spec.p }).mount(scope, cx);
try tt.trigger.appendChild(a, try W.Button(.{ .label = spec.t, .variant = .secondary }).mount(scope, cx));
try grid.appendChild(a, tt.wrapper);
}
try c.appendChild(a, grid);
return c;
}Der unveränderte Quellcode der Story aus dem Storybook (zenit 5f9add5+wip 2026-09-30). W steht für ui.widgets; col / row / label sind kleine Layout-Helfer des Storybooks.
TooltipProps
ui.widgets.Tooltipfn Tooltip(props: TooltipProps) TooltipBuilderFeld
Typ
Standard
Beschreibung
text[]const u8—
—
positionTooltipPosition.top.top_start.top_end.bottom.bottom_start.bottom_end.left.left_start.left_end.right.right_start.right_end.top—
offsetf326—
open_delay_msf32200hover 后到 tooltip 开始显示的延迟(ms);期间移开指针则不显示。
background?Colornull—
text_color?Colornull—
font_sizef3212—
TooltipResult
ui.widgets.TooltipFeld
Typ
Standard
Beschreibung
wrapper*Node—
—
trigger*Node—
—
content*Node—
—