Skip to content
oldmangan edited this page Oct 6, 2026 · 1 revision

An anchored popover for pickers, help text and small forms, and the styled tooltips used across every widget. Added in #36.

Popup

from wapyt import FieldConfig, Form, FormConfig, Popup, PopupConfig

popup = Popup(PopupConfig(placement="bottom-start", label="Filter", width=280))
form = Form(FormConfig(submit_text="Apply", fields=[FieldConfig(id="q", label="Contains")]),
            container=popup.body)
form.on_submit(lambda values: (apply_filter(values), popup.hide()))

toolbar.on_click(lambda e: e["id"] == "filter"
                 and popup.toggle('.wapyt-toolbar-btn[data-id="filter"]'))
PopupConfig
placement bottom (default), top, right, left; add -start / -end to line up an edge instead of centring
offset Gap from the anchor, px (default 6)
width, max_width, max_height Size; the body scrolls past max_height
label aria-label of the popup (role="dialog")
close_on_outside, close_on_escape Both on by default
focus Move focus to the first control inside when shown (default on)
css Extra classes

Methods: show(anchor), toggle(anchor), hide(), is_visible(), set_text(text), attach_html(html) (raw markup you escaped yourself), destroy(). Mount widgets into popup.body. Events: on_show, on_hide (however it closed).

An anchor is an element, a CSS selector, or an (x, y) point, such as a click position.

  • It is never clipped: the popup is appended to <body> while open, above modals. It flips to the opposite side when its side has no room, stays inside the viewport, follows the anchor as the page scrolls, and closes if the anchor leaves the page.
  • Escape closes it and returns focus to the anchor. An enclosing ModalWindow stays open, and a Form combo inside closes its own list first.
  • A press outside closes it without moving focus. Presses on the anchor (so toggle works from its click handler) and on combo lists or context menus opened from inside do not count as outside.
  • The anchor gets aria-expanded, aria-controls and aria-haspopup.

Tooltips

Every wapyt widget's hover text is now a styled tooltip that also appears on keyboard focus, and your own elements can have one:

from wapyt import tooltip, tooltip_attr

tooltip("#save", "Save (Ctrl+S)")                    # an element or selector
tooltip(cell_el, long_text, overflow=True)           # only when the text is cut off
html = f'<button {tooltip_attr("Delete <all>", "right")}>Delete</button>'  # escaped
  • Widgets need nothing. Toolbar, DataTable, Tree and Sidebar still set title; wapyt turns those into styled tooltips the first time they are pointed at or focused. An icon-only control keeps the text as its accessible name.
  • Your own markup keeps native title tooltips unless you use tooltip(), tooltip_attr() or a data-wapyt-tooltip attribute.
  • Only when it helps: truncated DataTable cells, and tree labels without an explicit TreeItem(tooltip=...), show one only while the text is cut off.
  • Timing: about half a second on hover, then at once while moving along a toolbar; at once on keyboard focus. Escape, a click or scrolling hides it.
  • Placement is top (default), bottom, left or right, flipped when there is no room. Text is always plain text.
  • set_tooltips_enabled(False) turns them all off.

Clone this wiki locally