Tooltip — NanoUI

A small popup that appears on hover/focus. Requires the nanoui-tooltip Stimulus controller.

Positions

<div class="nano-tooltip nano-tooltip--top"
     data-controller="nanoui-tooltip"
     data-nanoui-tooltip-delay-value="200"
     data-action="mouseenter->nanoui-tooltip#show mouseleave->nanoui-tooltip#hide
                  focusin->nanoui-tooltip#show focusout->nanoui-tooltip#hide">

  <button class="nano-btn nano-btn--outline nano-btn--sm">Hover me</button>

  <div class="nano-tooltip__content" role="tooltip">
    Save your progress
  </div>
</div>

Positions

Add nano-tooltip--top (default), nano-tooltip--bottom, nano-tooltip--left, or nano-tooltip--right.

Stimulus controller

Values: delay (Number, default 200ms)
Actions: show(), hide()
Shows on hover and focus, hides on mouseleave and blur