Explain

pura-explain wraps content (default slot) and associates a text explanation with it, revealed by humans through a small "?" button in a floating popover. The explanation is always present in the accessibility tree via aria-description, so screen readers and agents read it without having to open anything. The agent-native layer exposes data-pura-id, data-pura-explanation, and data-pura-open on the host and registers each explanation in window.__puraExplains (data-pura-id -> { id, text, open, element }), letting an agent enumerate every explanation on the page and read each one as a string without opening the popover or crossing the shadow DOM. Use around technical terms, jargon, or fields that need context.

Preview

<p style="max-width:32rem;line-height:1.7">
  Your invoice goes into
  <pura-explain text="The period during which a payment is past its due date and still hasn't been settled." placement="bottom">delinquency</pura-explain>
  30 days after the due date, at which point we begin charging
  <pura-explain placement="top">
    interest
    <span slot="explanation">A surcharge of <strong>2%</strong> on the original amount plus 0.033% per day.</span>
  </pura-explain>
  on the outstanding balance.
</p>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/explain.js"></script>

import "./pura/lib/explain.js";