Tooltip

TooltipComponent (trigger: icon/text, content: slot). Rich hover/focus detail panel — not a title attribute: title can't hold structured multi-line content and isn't reliably reachable by keyboard or announced consistently by screen readers. See flows/order-refund/index.html's Payment column for the reference usage (a payment breakdown: subtotal, coupon, shipping, tax, paid).

Trigger + panel

Shown via :hover/:focus-within on the wrapper — no JS required, consistent with this system's <details>-based popovers elsewhere. The trigger is a real <button> (focusable by default), linked to the panel via aria-describedby so assistive tech gets the same content on keyboard focus as on mouse hover, not just one or the other.

Payment flag icons (companion pattern, not the tooltip itself)

.payment-flag is a compact, icon-only sibling to .badge/.pill for a binary "this order has X" signal in a dense cell where a full text badge would be too wide to sit two-up. Pair with a real accessible name (title is acceptable here since it's a single short label, not structured content) — distinct from the tooltip trigger above, which needs the richer pattern because its content is multi-line.

Usage guidance

Anchor the panel to the side that has room: bottom: 100% (opens upward) reads well in a table row near the top of the viewport; flip to top: 100% for rows near the bottom of a tall page. Right-align the panel to its trigger (right: 0) rather than centering, to avoid the same horizontal clipping .filter-popover__panel already accounts for — .table-scroll only clips overflow-x, so a vertically-anchored tooltip is never cut off, but one that overflows sideways past the table's right edge would be. Keep panel content short: a payment breakdown (4-6 rows) is the ceiling: this is a glance-and-dismiss detail view, not a place for paragraphs.