Pixel UI/Overlays/Tooltip

Tooltip

A pixel speech bubble that types its words out.

<piix-tooltip>WebGL

Bookmark

<piix-tooltip tip="Copy link">
  <piix-button tone="paper" size="sm">Share</piix-button>
</piix-tooltip>
<piix-tooltip tip="Saved for later" theme="light">
  <piix-button tone="sun" size="sm">Bookmark</piix-button>
</piix-tooltip>

Wrap anything. On hover or focus a bubble with a stepped pixel tail pops up and the text types itself in behind a blinking block cursor. It flips below when there is no room above, floats over everything so it never gets clipped, and Escape hides it.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just tooltip (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/tooltip.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-tooltip tip="Copy link">
      <piix-button tone="paper" size="sm">Share</piix-button>
    </piix-tooltip>
    <piix-tooltip tip="Saved for later" theme="light">
      <piix-button tone="sun" size="sm">Bookmark</piix-button>
    </piix-tooltip>
  );
}

Usage

<piix-tooltip tip="Copy link">
  <piix-button tone="paper" size="sm">Share</piix-button>
</piix-tooltip>
<piix-tooltip tip="Saved for later" theme="light">
  <piix-button tone="sun" size="sm">Bookmark</piix-button>
</piix-tooltip>

API reference

Attribute	What it does	Default
`tip`	the words	–
`side`	`top` `bottom`	`top`
`theme`	`dark` `light`	`dark`
`delay`	ms before it shows	`150`

Accessibility

The tip describes the element inside (aria-describedby), so screen readers read it.
It shows on keyboard focus too, and Escape hides it.
With reduced motion the words appear at once.