Tooltip

<div ui-tooltip>
  <button ref="trigger" aria-describedby="tip-1">Hover me</button>
  <span ref="panel" id="tip-1" role="tooltip" hidden>
    Helpful hint text.
  </span>
</div>

import { UI } from "tiny-engine-core";

UI.register("tooltip", (el, api) => {
  const show = () => { api.refs.panel.hidden = false; };
  const hide = () => { api.refs.panel.hidden = true; };

  api.on(api.refs.trigger, "mouseenter", show);
  api.on(api.refs.trigger, "mouseleave", hide);
  api.on(api.refs.trigger, "focus", show);
  api.on(api.refs.trigger, "blur", hide);

  return { show, hide };
});

UI.init();