Dark mode tooltip

.dmt-wrap { position: relative; display: inline-block; }
.dmt-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dmt-wrap:hover .dmt-tip,
.dmt-wrap:focus-within .dmt-tip { opacity: 1; }

You are implementing accessible dark-theme tooltips without JavaScript.

Goal: Show extra context on hover and keyboard focus for a compact label (e.g. SKU, icon button).

Technical constraints:
- Tooltip must appear on :focus-within so keyboard users see it.
- Use opacity/visibility — avoid display:none toggles that break focus.
- Surface uses oklch for a slightly lifted panel; border uses var(--card-border).
- Wire aria-describedby from trigger to tooltip id; role="tooltip" on the bubble.

Framework variant A: plain HTML/CSS.
Framework variant B: React — forward ref on trigger, id generation for aria-describedby.

Edge cases:
- Tooltip near viewport top: allow flipping to bottom with a modifier class.
- Touch devices: consider tap/long-press in product — CSS-only can’t show on first tap reliably; document limitation.
- prefers-reduced-motion: shorten or remove translate animation.

Return HTML + CSS.