[ @sdxc/u/layout ]

position-anchor

Points an absolutely or fixed positioned element (a tooltip, popover, or menu) at the anchor name anchorName declared on its target.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { positionAnchor } from "@sdxc/u/layout";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.positionAnchor("tooltip-trigger")`	`css({ positionAnchor: "--tooltip-trigger" })`
`u.positionAnchor("menu-button")`	`css({ positionAnchor: "--menu-button" })`

Examples

Basic example

Use positionAnchor(name) to tether a positioned element to the element that declares the same anchorName(name):

⌘S

<div>
	<button type="button" mix={[anchorName("save"), ...]}>
		Save
	</button>
	<div mix={[absolute(), positionAnchor("save"), positionArea("right"), mis(2), ...]}>
		⌘S
	</div>
</div>

Anchor a popover to its trigger the same way, so a menu opened with popovertarget lands next to the button. Click the button to open it:

<div>
	<button
		type="button"
		popovertarget="options-menu"
		mix={[anchorName("options"), ...]}
	>
		Options
	</button>
	<div
		id="options-menu"
		popover
		mix={[
			positionAnchor("options"),
			positionArea("bottom span-right"),
			inset("auto"),
			m(0),
			mbs(2),
			open(vstack({ gap: 1, align: "start" })),
			...,
		]}
	>
		<span>Rename</span>
		<span>Duplicate</span>
		<span>Delete</span>
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.positionAnchor("tooltip-trigger"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.positionAnchor("tooltip-trigger"))

Signature

u.positionAnchor(name: string)