v135 · dom
Tooltip factory
A form where every input has a contextual tooltip popover wired via ariaDescribedByElements. Using element references means the form can be stamped multiple times on the same page without ID conflicts — something impossible with aria-describedby="tooltip-1" when the same form appears twice.
ariaDescribedByElements: checking…
ARIA reflection — what assistive technology reads
| Input | ariaDescribedByElements | aria-describedby | Tooltip text (AT reads) |
|---|
// Tooltip factory: wire inputs to tooltips via element references
// Works even when the form is duplicated — no ID conflicts
function wireTooltips(formRoot) {
formRoot.querySelectorAll('[data-tooltip-for]').forEach(input => {
const tooltipId = input.dataset.tooltipFor;
const tooltip = formRoot.querySelector(`[data-tooltip-id="${tooltipId}"]`);
if (!tooltip) return;
if ('ariaDescribedByElements' in input) {
// Chrome 135+: element reference — no global ID needed
input.ariaDescribedByElements = [tooltip];
} else {
// Fallback: synthesize a unique ID to avoid cross-form conflicts
const uid = tooltipId + '-' + Math.random().toString(36).slice(2, 7);
tooltip.id = uid;
input.setAttribute('aria-describedby', uid);
}
});
}
// Stamp the form twice — both work correctly with no ID collisions
document.querySelectorAll('.form-instance').forEach(wireTooltips);