20

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:

Dropdown Menu

Click the button to see a dropdown menu positioned below:

Tooltips

Hover over the element below to see a tooltip:

Hover over me

Context Menu

Right-click in the gray area for context menu:

Right-click in this area

Modifier Testing

Test different positioning modifiers:

Placement Test

Offset Test

Flip Test

Strategy Test

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"
))