Tooltip

tooltip is a text leaf styled as a tooltip: its content (with {} interpolation) is the whole element, so showing one is ordinary conditional layout — render it under an if driven by the model, positioned above the control it annotates. For the chat-message surface, see bubble.

A tooltip above a hovered button rendered by the engine (dark theme) — the tooltip leaf above the hovered control it annotates

Markup

<column gap="8" cross="center">
  <tooltip>Add to library</tooltip>
  <button variant="outline" on-press="add_to_library">Hover</button>
</column>

Zig builder

ui.column(.{ .gap = 8, .cross = .center }, .{
    ui.el(.tooltip, .{ .text = "Add to library" }, .{}),
    ui.button(.{ .variant = .outline, .on_press = .add_to_library }, "Hover"),
})

Attributes

Attribute	Description
`text`	Text value for text-bearing elements; a literal or one {binding}.