FancyUI
Saved GitHub Get started
A white demo window: a dashed Reference box ringed by twelve dots, the lower-right dot filled and a red right-end label beside the box.
Captured from the project's demo · Floating UI · MIT licence · Source ↗

Popover — placement picker

Floating UI OPEN SOURCE

Click a dot around the anchor and the floating label moves to that side and alignment.

#minimal#editorial#select

Visit source

Related FancyUI components

  • Popover

    An anchored panel you open; the reference teaches placements rather than shipping one.

    pnpm add fancy-ui-svelte
    import { Popover } from "fancy-ui-svelte";

    Docs Source

  • Tooltip

    Anchored hint on hover or focus, with a fixed preferred side instead of a picker.

    pnpm add fancy-ui-svelte
    import { Tooltip } from "fancy-ui-svelte";

    Docs Source

Type
Interaction
Interaction
Select
Style
Minimal, Editorial
Framework of source
React
Code availability
Open source

Why it works

Twelve dots ring a dashed reference box; each one is a placement, and clicking it moves the floating label there and prints the placement name inside it. The demo teaches a vocabulary (side plus start, centre or end) by letting you point at it. Neighbouring cards show the same anchor shifting and flipping as its container scrolls.

When to use it

Explaining or configuring anchored UI: tooltip settings, a docs page, a design tool's popover options.

Things to watch

Placement is a preference, not a guarantee: collision handling may flip it, and the label should say what was used. Dots need focus styles and names; colour alone does not mark the selected one.

Implementation clues

  • side + alignment = placement
  • compute position from two rects
  • flip and shift middleware
  • autoUpdate on scroll and resize