CSS is Awesome

Interactive component

Tooltip

Zero-JS tooltip built on native popover=“hint”. Multiple hints can coexist without stack-cancelling each other. Browser handles show, close, Escape, layering — cia ships zero tooltip JavaScript.

0 KB JSBaseline 2024 (popover)aria-describedby ready

Use this button to invite team members

The tooltip is the real cia.tooltip output on a native popover=“hint” element. Production tooltips pair the trigger with aria-describedby — as this one does — so screen readers announce the description when the trigger is focused.

Usage

// app.scss
@use 'css-is-awesome' as cia;

.info-tip { @include cia.tooltip; }
<!-- index.html -->
<button popovertarget="help-tip"
        type="button"
        aria-describedby="help-tip">?</button>

<div id="help-tip"
     popover="hint"
     class="cia-tooltip">
  Use this button to invite team members
</div>
MetricciaFloating UI + Tooltip
JavaScript shipped0 KB~12 KB
Show / closeNative via popovertargetJS event listeners
Stack behaviorhint mode — multiple coexistJS-managed open state
Escape to closeNativeJS handler
LayeringTop layer (native)Portal + z-index
Theme