components/tooltip
오버레이와 피드백 · 40 / 64

Tooltip

ui.widgets.Tooltip

컨트롤에 짧은 보충 설명을 제공합니다.

BEHAVIOR CONTRACT

네 방향 배치, hover 지연, portal 레이어, 벗어날 때 dismiss가 레이아웃 트리를 건드리지 않습니다.

RECORDED INTERACTION

가상 커서가 Top trigger에 hover하면 말풍선이 실제로 나타납니다.

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에서 소스 보기examples/storybook/stories.zig:2475

Storybook에 있는 이 story의 원본 코드입니다(zenit 5f9add5+wip 2026-09-30). W는 ui.widgets이며, col / row / label은 Storybook 내부의 작은 레이아웃 헬퍼입니다.

zenit · 이중 라이선스오픈 소스 프로젝트는 GPL-3.0-only로 무료 사용할 수 있으며, 비공개 소스나 상용 제품에는 상용 라이선스가 필요합니다.작성자 연락처: zongyi.xzy#gmail.com (#을 @로 바꾸세요)zenit 5f9add5+wip 2026-09-30