Tooltip

The tooltip is a small floating label that appears on hover or keyboard focus to give extra context for an element — a truncated label, an icon-only button, a keyboard shortcut hint. It is the one overlay-style component in FlickUI with zero JavaScript involvement: positioning, showing, and hiding are all handled by plain CSS using :hover/:focus-within on a wrapping .tooltip-anchor element.

<span class="tooltip-anchor">
  <button type="button" class="btn btn-subtle btn-outline"><span class="btn-label">Hover me</span></button>
  <span class="tooltip" role="tooltip">Helpful tooltip text</span>
</span>