Tooltip

Styled tooltip from any title attribute, auto-converted. Placement via data-tooltip-placement; delay via --mo-tooltip-delay.

INSTALL

1pnpm dlx @sayagodev/mo add tooltip

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/tooltip.css";2import "@sayagodev/mo/js/tooltip.js";

EXAMPLES

Default

1<button type="button" class="outline" title="Add to library">Hover</button>2

Sides

1<div class="hstack gap-2">2  <button type="button" class="outline" title="Add to library" data-tooltip-placement="left">Left</button>3  <button type="button" class="outline" title="Add to library">Top</button>4  <button type="button" class="outline" title="Add to library" data-tooltip-placement="bottom">Bottom</button>5  <button type="button" class="outline" title="Add to library" data-tooltip-placement="right">Right</button>6</div>7

Keyboard shortcut

1<button type="button" class="outline" title="Save Changes (⌘S)">2  Save3  <kbd>⌘S</kbd>4</button>5

Disabled

1<span title="This feature is currently unavailable">2  <button type="button" class="outline" disabled>Disabled</button>3</span>4

USAGE

1<button title="Tooltip text">Hover me</button>2<button title="…" data-tooltip-placement="left|right|bottom">…</button>

API

NAMEKINDDESCRIPTION

titleattributeAny element with a title gets the styled tooltip

[data-tooltip-placement]attributetop (default) · bottom · left · right

--mo-tooltip-delaytokenReveal delay (default 700ms)

FILES

src/css/tooltip.csssrc/js/tooltip.js

Install:mo add tooltip

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Global tokens

--background--foreground--radius

Component hooks

--mo-tooltip-delay

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.