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.

When an anchored element’s default position would push it outside the viewport or its containing block, the browser can automatically try alternative placements using position-try-fallbacks. The try-* utilities set the list of fallbacks to attempt, and try-order-* controls the order in which they are evaluated. Together they let you build tooltips, dropdowns, and context menus that intelligently reposition themselves without any JavaScript.

​
Controlling fallback order with try-order-*

Before the browser tests each fallback, you can influence which fallback wins by setting an ordering strategy.

​
try-order-normal

Try each fallback in the order it appears in the position-try-fallbacks list. This is the default. 
<div class="anchored/my-btn anchored-bottom try-flip-y try-order-normal">Tooltip</div>

/* generated */
position-try-order: normal;

​
try-order-w

Among all valid fallback positions (those that fit without overflow), prefer the one that gives the anchored element the most available width. 
<div class="anchored/my-btn anchored-bottom try-flip-all try-order-w">Dropdown</div>

/* generated */
position-try-order: most-width;

​
try-order-h

Prefer the fallback that gives the anchored element the most available height. 
<div class="anchored/my-btn anchored-bottom try-flip-all try-order-h">Menu</div>

/* generated */
position-try-order: most-height;
Combine try-order-w or try-order-h with multiple try-* fallbacks to build menus that automatically expand toward the side with the most available space, rather than simply flipping to the opposite side.

​
Setting fallbacks with try-*

​
try-none

Remove all fallbacks. The anchored element stays at its default position even if it overflows. 
<div class="anchored/my-btn anchored-bottom try-none">Tooltip</div>

/* generated */
position-try-fallbacks: none;

​
Flip utilities

The flip utilities generate the standard CSS keyword fallbacks for common mirroring patterns.
UtilityCSS valueEffect
try-flip-xflip-inlineMirror horizontally
try-flip-yflip-blockMirror vertically
try-flip-sflip-startMirror along writing-mode start axis
try-flip-allflip-block, flip-inline, flip-block flip-inlineTry vertical, horizontal, and diagonal flips
<div class="anchored/my-btn anchored-bottom try-flip-y">Tooltip</div>

/* generated */
position-try-fallbacks: flip-block;

​
Position area fallbacks

Any position-area value can be used as a fallback directly. The utility names match the anchored-* positioning utilities. Each try-* class sets position-try-fallbacks to that single value: 
<!-- try above the anchor as a fallback -->
<div class="anchored/my-btn anchored-bottom try-top">Tooltip</div>

/* generated */
position-try-fallbacks: top;
To specify multiple fallback values in a single position-try-fallbacks declaration, use the arbitrary value syntax with a comma-separated list: 
<div class="anchored/my-btn anchored-bottom try-[top,_bottom-left]">Tooltip</div>

/* generated */
position-try-fallbacks: top, bottom-left;

​
Arbitrary values

For custom fallback lists or values not covered by the preset utilities: 
<div class="anchored/my-btn anchored-bottom try-[top,_left]">Tooltip</div>

/* generated */
position-try-fallbacks: top, left;

​
Example: tooltip with automatic repositioning

The following tooltip starts below its trigger but flips above it when there is not enough space below, and also tries diagonal positions as a last resort. 
<button class="anchor/tooltip-trigger">
  Hover me
</button>

<div class="anchored-bottom-center/tooltip-trigger try-flip-all try-order-h w-max px-3 py-1.5 rounded bg-gray-900 text-white text-sm">
  This tooltip repositions automatically
</div>
When the button is near the bottom of the viewport, the browser tries flip-block (above the button), then flip-inline (mirrored horizontally), then both — and picks whichever gives the most height.

Position visibility

Hide the anchored element when no fallback fits the viewport.

position-area utilities

The full list of position-area values available as fallback targets.

Build docs developers (and LLMs) love

Get started for freeTalk to us