Skip to content
Pinky UI

Hover Text Reveal

`HoverTextReveal` swaps a primary label for a short secondary label such as “View project” → “Open project →” on hover or focus. It is a compact action affordance, not a content transition.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

View project

Purpose

HoverTextReveal swaps a primary label for a short secondary label such as “View project” → “Open project →” on hover or focus. It is a compact action affordance, not a content transition.

Keep both labels concise and similar in width. Use it on a real link/button or a small focused label. Do not put essential instructions only in the alternate phrase or use it on long sentences.

Focus activates the same state as hover, and the primary label remains the accessible name. Ensure the static label is still clear with reduced motion or when transitions are disabled.

Source: packages/skills/text/hover-text-reveal.md