Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/toolwind/anchors/llms.txt

Use this file to discover all available pages before exploring further.

In this guide you will build a simple tooltip that appears below a button using the CSS Anchor Positioning API. You will define the button as an anchor, attach the tooltip to it, and then explore how to reposition the tooltip to different sides — all without any JavaScript or inline styles.

​
Prerequisites

Make sure you have installed and registered the plugin before following this guide. See installation if you have not done that yet.

​
Step 1: Define an anchor

Use the anchor/{name} utility to register an element as an anchor. The name you provide is automatically converted to a valid CSS dashed ident under the hood. 
<button class="anchor/my-btn">
  Hover me
</button>
This generates: 
.anchor\/my-btn {
  anchor-name: --tw-anchor_my-btn;
}
If you need to reuse the same anchor name in raw CSS elsewhere, use a dashed ident directly: anchor/--my-btn. The plugin preserves dashed idents as-is instead of prefixing them, so the generated value will be anchor-name: --my-btn.

​
Step 2: Attach and position the tooltip

Use anchored-{position}/{name} to attach an element to the anchor and specify where it should appear. The shorthand combines position-anchor and position-area in a single class. 
<button class="anchor/my-btn">
  Hover me
</button>

<div class="anchored-bottom-center/my-btn">
  Tooltip text
</div>
This generates: 
.anchored-bottom-center\/my-btn {
  position-anchor: --tw-anchor_my-btn;
  position-area: bottom center;
}

/* applied at zero specificity so you can override without !important */
:where(.anchored-bottom-center\/my-btn) {
  position: absolute;
  /* view-transition-name is derived from the anchor name via base-36 encoding */
  view-transition-name: --tw-anchor-view-transition-2w3j2p2r3136;
}
The :where() wrapper sets position: absolute and a view-transition-name at zero specificity, so you can override either property with a plain utility class like fixed without needing !important.

​
Step 3: Try different positions

Swap the position segment to move the tooltip to any side. All of the following use the same anchor name — only the placement changes. 
<!-- above the button, centered -->
<div class="anchored-top-center/my-btn">Top</div>

<!-- below the button, centered -->
<div class="anchored-bottom-center/my-btn">Bottom</div>

<!-- to the left of the button, centered -->
<div class="anchored-left-center/my-btn">Left</div>

<!-- to the right of the button, centered -->
<div class="anchored-right-center/my-btn">Right</div>

<!-- bottom-left corner -->
<div class="anchored-bottom-left/my-btn">Bottom left</div>

<!-- top-right corner -->
<div class="anchored-top-right/my-btn">Top right</div>
Each class maps directly to a position-area value:
ClassGenerated CSS
anchored-top-centerposition-area: top center
anchored-bottom-centerposition-area: bottom center
anchored-left-centerposition-area: left center
anchored-right-centerposition-area: right center
anchored-bottom-leftposition-area: bottom left
anchored-top-rightposition-area: top right

​
Full example

Here is the complete tooltip example with a bit of styling: 
<div class="relative inline-block">
  <button class="anchor/my-btn px-4 py-2 bg-blue-600 text-white rounded">
    Hover me
  </button>

  <div class="anchored-bottom-center/my-btn px-2 py-1 bg-gray-900 text-white text-sm rounded whitespace-nowrap">
    This is a tooltip
  </div>
</div>
The anchor and its anchored element do not need to be siblings or share a parent. The CSS Anchor Positioning API works across the DOM as long as both elements are in the same stacking context. The relative wrapper above is only for the button’s own layout — not required by the plugin.

​
Animate position changes with View Transitions

Every anchored/{name} class automatically receives a view-transition-name. This means you can animate the tooltip moving from one position to another using the browser-native View Transitions API: 
document.startViewTransition(() => {
  tooltip.classList.remove('anchored-bottom-center/my-btn')
  tooltip.classList.add('anchored-top-center/my-btn')
})
The browser smoothly animates the position change without any additional CSS keyframes. See View Transitions for more.

​
Next steps

Core utilities

Explore anchor, anchored, and position-area utilities in depth.

Anchor functions

Use anchor() with offsets for pixel-precise placement.

Position try

Add fallback positions so tooltips stay on screen near viewport edges.

Utility index

Full reference for every class the plugin generates.

Build docs developers (and LLMs) love

Get started for freeTalk to us