overlays
Adaptive Popover
A contextual surface measures its local boundary, flips when needed and stays attached to the trigger.
- overlays
- popover
- collision
- anchored
A collision-aware local context surface, not a tooltip with a larger box.
Live preview
Quick usage
import { AdaptivePopover } from "@pinky-ui/systems";
<AdaptivePopover title="More context">...</AdaptivePopover>Presets
Default
Restrained production behaviour.
Default behaviour
Quiet
Reduced intensity for dense product screens.
disabled={true}
Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add adaptive-popoverPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Accessible heading for the contextual surface. |
| className | string | — | Styles the outer interaction surface. |
Accessibility
- Keyboard and touch paths match the pointer interaction.
- Stable labels and values remain available without motion.
Performance
- Position updates are coalesced through requestAnimationFrame on scroll and resize.
- The surface mounts only while open.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Short contextual explanations or actions near a source
When not to use
- Persistent navigation or a multi-step dialog
Skill
Purpose
Use an adaptive popover for short context or actions that should stay next to a trigger and move when the available local space changes.
Interaction anatomy
- A labelled trigger owns expanded state.
- The surface measures its boundary, then flips or shifts.
- Escape, outside press and an explicit close button dismiss it.
Good for
Short explanations, compact action clusters and context around a product control.
Avoid
Primary navigation, long forms or blocking workflows.
Live example
Open the Adaptive Popover near the edge of its stage and resize or scroll to see the local placement logic.
Usage
<AdaptivePopover title="More context">A short explanation.</AdaptivePopover>Tune
Tune the preferred placement, offset, estimated surface size and mobile width. Keep collision behaviour deterministic.
Accessibility and reduced motion
Expose aria-expanded and aria-controls, keep the surface labelled, restore focus to the trigger, and make every action a real button. Reduced motion removes scale and travel while preserving open state.