InfoTip

A small round button beside a term that opens a short explanation. Pick it over Tooltip when the text matters, because it works by touch, by keyboard and at any zoom.

InfoTip

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, InfoTip

Lowest price in 30 days: 89.00

Drafts

Dark theme, InfoTip

Lowest price in 30 days: 89.00

Drafts

High contrast theme, InfoTip

Lowest price in 30 days: 89.00

Drafts

UsageLink to the section Usage

tsx

import { InfoTip } from '@skribly/ui/overlays'

tsx

<InfoTip label="About the lowest price">
  The lowest price in the 30 days before the discount.
</InfoTip>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A real button with a name that says what it explains.
Enter or a tap opens the text as a small dialog, Escape closes it and focus returns.
The sm size is a 24px target, the WCAG 2.2 minimum; md is 32px.

This demo runs through axe in all three themes on every test run. See what the tests check.