Prototype Library

Tooltip

Hover and focus tooltip. Wrap a trigger in the default slot and set text. It shows after delay ms (default 200) and hides on leave or blur.

Inherited wc import '@esa/ecology/esa-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.

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

API

PropTypeDefaultDescription
text string '' Tooltip label. The tooltip does not render when empty.
position 'above' | 'below' | 'left' | 'right' 'above' Side the tooltip appears on.
delay number 200 Milliseconds to wait before showing on hover/focus.
open boolean false Reflected open state.

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.