浮层与反馈Overlays · 40 / 64

Tooltip

ui.widgets.Tooltip

为控件提供短小补充说明。Short supplementary hints for controls.

BEHAVIOR CONTRACT

四向定位、hover 延迟、portal 层级和离开 dismiss 不改变布局树。Four placements, hover delay, portal layering and dismiss-on-leave never touch the layout tree.

RECORDED INTERACTION

虚拟鼠标悬停 Top trigger，气泡真实出现。The virtual cursor hovers the Top trigger and the bubble appears.

examples/storybook/stories.zig:2475

// ── 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;
}

在 GitHub 查看源码View source on GitHubexamples/storybook/stories.zig:2475

这是 Storybook 中该 story 的原样代码（zenit 5f9add5+wip 2026-09-30）。其中 W 即 ui.widgets，col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.

← PREV

NotificationNotification

PopoverPopover