# position-anchor

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

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

Points an absolutely or fixed positioned element (a tooltip, popover, or
menu) at the anchor name anchorName declared on its target. Pass
`name` bare; the `--` custom-property prefix is added here.

## 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)`:

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

### Anchoring a popover

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:

```tsx
<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.

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

## Responsive design

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

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

## Signature

```ts
u.positionAnchor(name: string)
```