Usage
Layer is a core positioning hook for rendering overlay content using CSS Anchor Positioning and the Popover API. Use it as the foundation for building popovers, hover cards, and tooltips without React portals.import {useXDSLayer} from '@xds/core/Layer'
Best practices
|
| Do | Use context mode for anchor-positioned overlays relative to a trigger element, and fixed mode for manually positioned overlays at specific coordinates. |
| Do | Build on higher-level components like Popover, HoverCard, and Tooltip instead of using Layer directly for common overlay patterns. |
| Don't | Implement ARIA patterns directly in a Layer — leave accessibility semantics to the higher-level components that build on it. |