Repository navigation
Popup
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.
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
toggleworks 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-controlsandaria-haspopup.
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
titletooltips unless you usetooltip(),tooltip_attr()or adata-wapyt-tooltipattribute. -
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,leftorright, flipped when there is no room. Text is always plain text. -
set_tooltips_enabled(False)turns them all off.
wapyt is MIT-licensed · Repository · pyTincture · Issues
Getting started
Widgets
- Layout and MainWindow
- Tree
- DataTable
- Form
- ModalWindow
- Window
- TabWidget
- Toolbar
- Sidebar
- Chat
- Terminal
- CardPanel
- ResourceBoard
- File Transfer
- Message
- ContextMenu
- MenuBar
- Listbox
- Kanban
- ProgressBar
- Pagination
- Popup and tooltips
- Chart
- Scheduler
- MediaPlayer
Guides
Planning
Contributing