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. It always plays a subtle opacity+scale reveal on show; pointing --tt-enter-anim-name at an entrance keyframe swaps in a full animation instead (opacity-only keyframes recommended, since transform-based ones fight the centering transform).

<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>