17

Position Handler

Floating UI-powered automatic positioning with collision detection

Best experienced on desktop with mouse/pointer support

Basic Popover

Click to open a popover with automatic positioning:

Floating Popover

Positioned with Floating UI!

  • Automatic scroll tracking
  • Collision detection built-in
  • Auto-flip when near edges

Dropdown Menu

Click the button to see a dropdown menu positioned below:

New File
Open...
Save
Exit

Tooltips

Hover over the element below to see a tooltip:

Hover over me
This tooltip uses Floating UI!

Context Menu

Right-click in the gray area for context menu:

Right-click in this area
Cut
Copy
Paste
Delete

Modifier Testing

Test different positioning modifiers:

Placement Test

Should appear at bottom-end of button

Offset Test

Should be 20px away from button

Flip Test

Should NOT flip even if near edge

Strategy Test

Should use fixed positioning

Features

Powered by Floating UI

  • Industry-standard positioning library
  • Battle-tested with millions of users
  • Handles all edge cases automatically
  • 53KB built size for complete functionality

Automatic Features

  • Scroll tracking (no manual calculations!)
  • Resize detection
  • Collision detection with viewport edges
  • Auto-flip when not enough space
  • Shift to stay visible
  • Hide when anchor off-screen

API Usage

Python Code Usage

# Basic usage
data_position="buttonId"

# With modifiers using tuple format
data_position=("triggerId", dict(
    placement="bottom-start",
    offset=8,
    flip=True,
    shift=True,
    hide=True,
    strategy="fixed"
))