Tooltip

Preview

<esa-tooltip text="Tooltip above" position="above">
  <button>Hover me</button>
</esa-tooltip>

Positions

<esa-tooltip text="Tooltip above" position="above">…</esa-tooltip>
<esa-tooltip text="Tooltip below" position="below">…</esa-tooltip>
<esa-tooltip text="Left side" position="left">…</esa-tooltip>
<esa-tooltip text="Right side" position="right">…</esa-tooltip>

Focusable trigger

Any focusable element works — the tooltip shows on focusin as well as hover, so keyboard users get it too.

<esa-tooltip text="Shows on focus too" position="above">
  <a href="#">Tab to me</a>
</esa-tooltip>

API

Accessibility

• The bubble is role="tooltip" and is pointer-events: none so it never intercepts clicks.
• Shows on both hover and focus, so keyboard users see the same hint as pointer users.
• Tooltips supplement — they should not be the only place critical information lives.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.