Pixel Tooltip

Compact hover tooltip with crisp monospace styling for short contextual hints.

Components / Pixel Tooltip

Feedbacktooltiphoverhint

Compact hover tooltip for terse control hints.

Preview

Loading preview…

Usage

Compact hover tooltip with crisp monospace styling for short contextual hints.

<PixelTooltip content="Save configuration" position="top">
  <OverlayButton aria-label="Save">S</OverlayButton>
</PixelTooltip>

Files

components/steez/PixelTooltip.tsxcomponent

components/steez/PixelTooltip.module.cssstyle

components/hooks/useStableId.tsfile

Install package

pnpm add @steez-ui/theme @steez-ui/icons @steez-ui/ui

import { PixelTooltip } from "@steez-ui/ui";

Install from registry

pnpm dlx shadcn@latest add https://steez-ui-6v5.pages.dev/r-steez/pixel-tooltip.json

Source files install at your project root. Import styles/steez/tokens.css once in your global stylesheet or root layout. No Steez packages needed.

import { PixelTooltip } from "<project-root>/components/steez/PixelTooltip";

Replace <project-root> with a relative path from your file.

Copy standalone file

/copy/steez/pixel-tooltip.tsxLoading…

Copy the entire generated TSX file into your React project. It embeds CSS, local helpers, icons, and theme fallbacks, so no Steez npm packages are required.

Open standalone source

Overlay Button

Compact floating control button for viewer tools and absolute-positioned UI.

Status Message

Inline success, info, and error status surface with shared icon treatment.