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.

By default, an anchored element is always rendered regardless of whether its anchor is on-screen or whether the anchored element itself overflows the viewport. The position-visibility CSS property lets you override this behavior so that the browser automatically hides the floating element under certain conditions. The anchored-visible-* utilities expose this property directly in your markup, making it easy to build tooltips, popovers, and dropdowns that disappear cleanly when their anchor scrolls out of view.

​
Available utilities

​
anchored-visible-always

Always show the anchored element, no matter where the anchor is. This is identical to the browser default when position-visibility is not set. 
<div class="anchored/my-btn anchored-bottom anchored-visible-always">Tooltip</div>

/* generated */
position-visibility: always;

​
anchored-visible-anchor

Hide the anchored element whenever its anchor is not at least partially visible within the scrollport. This is the most commonly useful value — it prevents orphaned tooltips from floating in the viewport after the user scrolls the anchor element away. 
<div class="anchored/my-btn anchored-bottom anchored-visible-anchor">Tooltip</div>

/* generated */
position-visibility: anchors-visible;

​
anchored-visible-no-overflow

Hide the anchored element when any part of it overflows the viewport or its containing block. Use this when you want the element to disappear rather than clip or scroll. 
<div class="anchored/my-btn anchored-bottom anchored-visible-no-overflow">Tooltip</div>

/* generated */
position-visibility: no-overflow;
anchored-visible-always is redundant unless you are explicitly reverting a different position-visibility value set elsewhere. When the property is absent, browsers treat the anchored element as always visible by default.

​
Arbitrary values

For values not covered by the preset utilities, use the Tailwind arbitrary value syntax: 
<div class="anchored-visible-[anchors-valid]">...</div>

/* generated */
position-visibility: anchors-valid;
Note that anchors-valid is not yet supported in any browser as of this writing. The arbitrary value slot is available for future use once browser support matures.

​
Combining with position-try fallbacks

position-visibility works well alongside position-try-fallbacks. When all fallback positions overflow the viewport, the browser can hide the element automatically with anchored-visible-no-overflow rather than showing it in a clipped or overlapping state. 
<div class="anchored/my-btn anchored-bottom try-flip-y anchored-visible-no-overflow">
  Tooltip
</div>

Fallback positioning

Define fallback positions so the browser can reposition before hiding.

Browser support

Check which browsers support position-visibility.

Build docs developers (and LLMs) love

Get started for freeTalk to us