{% comment %}
Tooltip (0.12.0, #56; supersedes STA-015's title-only baseline). Consumed by
EXTENDING, like patterns/ and _modal.html: a consumer's tooltip partial opens
with {% extends "brickwork/components/_tooltip.html" %} and fills the
trigger block, e.g.
{% extends "brickwork/components/_tooltip.html" %}
{% block trigger %}
{% endblock %}
Named blocks (semver-public, BR-BW-TPL-001):
trigger: present SINCE 3.4.0, the concise successor to the
deprecated tooltip_trigger block below (ADR-077 SS4).
Empty by default.
tooltip_trigger: present since before 3.4.0 (unchanged back to at least
3.2.1). DEPRECATED, removed at 4.0 (ADR-077 SS4,
BR-BW-TPL-001/BR-BW-VER-001). Kept as an additional
empty extension point for backwards compatibility: a
shipped block name cannot be renamed silently. Both
trigger and tooltip_trigger render when both are
filled; a caller migrating to the concise name fills
trigger only.
A block name this file does not define is SILENTLY DISCARDED by Django:
no error, no warning, DEBUG=True does not catch it. A consumer pinned
below 3.4.0 who fills "trigger" from a newer checkout gets a
structurally valid, entirely empty trigger span that still passes
template loading; check this header against your pinned version before
relying on a name.
No-JS floor (BR-BW-HTMX-006): the trigger keeps a native title attribute set
to ``text``, so a tooltip with zero JavaScript still has SOME accessible
hint (the browser's own native title tooltip) rather than a silently absent
one. Enhanced: bwTooltip shows a styled bubble on hover AND focus (not click:
a tooltip is supplementary information, not an interactive disclosure), wired
via aria-describedby, and hides on mouseleave, blur or Escape. A tooltip is
NOT a dialog (WAI-ARIA APG Tooltip pattern): it never traps focus and never
blocks the trigger's own click/keyboard behaviour, unlike bw_modal.
Required context:
id: a stable, id-safe token (letters, digits, hyphen, underscore; the same
convention {% bw_tabs %} enforces at render time), for aria-describedby.
This is the BUBBLE's id (role="tooltip" id="{{ id }}"); the wrapper
root carries "{{ id }}-root" so the two never collide. Structural
extends-consumed template, so this cannot raise at render time the way
a tag can; the caller supplies a safe id (mirrors _modal.html's
modal_id doctrine: an unsafe id is an authoring error, not a runtime
guard here).
text: the tooltip's content. Rendered BOTH as the trigger's native title
(the no-JS floor) and inside the bubble (the enhanced floor), so the
two never drift out of sync.
Optional:
placement ("top" default | "bottom" | "start" | "end"): "start"/"end" are
logical (inline-start/inline-end), so they flip automatically under
dir="rtl"; "top"/"bottom" are block-axis and direction-agnostic.
Events (optional conventions, BR-BW-HTMX-004): bw:tooltip:show,
bw:tooltip:hide (detail { id }).
Tokens (CSS lane): bubble at --bw-z-tooltip (the highest rung in the
stacking scale, DESIGN.md section 6.5) over --bw-color-surface-raised,
--bw-elevation-2, radius --bw-radius-md. Motion, when present, follows the
BR-BW-TOK-009 reduced-motion floor like every other overlay in the set.
States: floor-only (native title attribute, no bubble shown) vs enhanced
(styled bubble shown on hover AND focus, hidden on mouseleave/blur/
Escape); four placement states (top default, bottom, start, end, the
last two logical and RTL-mirroring).
Accessibility: WAI-ARIA APG Tooltip pattern, explicitly NOT a dialog: it
never traps focus and never blocks the trigger's own click/keyboard
behaviour. Wired via aria-describedby pointing at the bubble's id; the
no-JS floor still carries the browser's own native title tooltip, so a
hint exists with zero JavaScript. Covered by axe.spec.mjs against
feedback-*.html/feedback-js-*.html/feedback-tooltip-open-*.html (the
floor, the JS-boot leg and the open bubble state respectively), both
themes.
Responsive: no breakpoint switch; no width-dependent CSS on any
.bw-tooltip* selector.
{% endcomment %}
{% block trigger %}{% endblock %}
{% block tooltip_trigger %}{% endblock %}
{{ text }}