Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Tooltips
Overlays

Tooltips

Tooltips patterns built with StyloftCSS and native HTML.

CSS only1 examplesKeyboard friendly HTML

Tooltip

A short noninteractive hint appears on hover and keyboard focus. The link keeps a complete visible name.

Live preview
Read the guideOpen the StyloftCSS getting-started guide.
View HTML / PlaygroundHTML source
example.htmlHTML
<span class="sl-tooltip"
  ><a
    class="sl-btn sl-btn--outline"
    href="/getting-started/"
    aria-describedby="ref-tooltip"
    >Read the guide</a
  ><span class="sl-tooltip__text" id="ref-tooltip" role="tooltip"
    >Open the StyloftCSS getting-started guide.</span
  ></span
>
HTML source · enable JavaScript for the playground10 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.