Settings

Arrow
Start
End 
{
  "placement": "outside",
  "position_area": "y-end",
  "align_self": "start",
  "justify_self": "anchor-center",
  "offset": 30
}

AnchorPop

GitHub

Create self-positioning popovers with native CSS—no JavaScript required

Try it

Drag the button to screen edges to see the popover follow and flip.
Play with the placement settings.

Usage

Make it pop! Make it float!

Built any of these components with AnchorPop in just a few lines of code

Hover over the to see the tooltip.

Select any text in this paragraph to see formatting tools appear above your selection.

Border Overlays

Hey! Great work on this project 👏

Annotations/ Highlights

const config = new AnchorPopConfig();

Inside Overlays

Image
Preview Cards

Hover to see details

Install

Option 1: Copy & Paste (Recommended)

Copy the components directly into your project for full control:

Option 2: NPM Package

Option 3: Visual Configuration

Use the settings panel above to visually configure your popover, then inspect the code and copy the configuration that works for you.

vs. Floating UI

Feature
AnchorPop
Floating UI
Implementation
Pure CSS
JavaScript
Real Arrows
✓ Dynamic
Static
Placement Options
✓ Outside
✓ Inside
✓ Overlay
✓ Border
✓ Outside
Directional Transitions
✓ Built-in
–
Performance
✓ No CLS
✓ Instant positioning
✓ No JS dependency
Initial layout shift
Requires JS calculation
Browser Support
(✓) Chrome/ Edge 125+, Safari TP
✓ All modern browsers

Roadmap

  • ✓ Svelte 5 Implementation
  • → React Version
  • ○ Vue Version
  • ○ Vanilla JS Version
  • ○ Animation Presets

Thank you