Overlay

Renders its children into a portal, positioned where it is declared — so they escape overflow: hidden, clipped ancestors and stacking contexts.

Import

JSX

import Overlay from '@cronocode/react-box/components/overlay';

A layer, not a pattern

Overlay owns no open state, no ARIA and no dismissal: it measures where it sits in the layout and renders its children at that spot, in the portal container. That is all every popup in this library shares — Tooltip, Dropdown and the DataGrid menu each add a different pattern on top. If what you are rendering describes a control, reach for Tooltip instead: it adds role="tooltip", the aria-describedby wiring, hover-and-focus open and Escape.

This component was called Tooltip before the accessibility work; code that used it purely to escape an overflow is this component, unchanged.

The problem it solves

(position absolute)

overflow hidden box

(overlay)

overflow hidden box

JSX

function Component() {
  const [openAbsolute, setOpenAbsolute] = useState(false);
  const [openOverlay, setOpenOverlay] = useState(false);

  return (
    <Flex gap={4} flexWrap="wrap">
      {/* position: absolute — clipped by the scrolling parent */}
      <Box flex1 height={40} b={1} borderRadius={1} overflow="auto" position="relative" minWidth={80}>
        <Flex ml={4}>
          <Button onClick={() => setOpenAbsolute(!openAbsolute)} position="relative" width={30}>
            Click me!
            {openAbsolute && (
              <Box position="absolute" left={0} top={12} height={50} p={3} b={1} borderRadius={2}>
                position absolute box
              </Box>
            )}
          </Button>
        </Flex>
      </Box>

      {/* Overlay — portalled out, so nothing clips it */}
      <Box flex1 height={40} b={1} borderRadius={1} overflow="auto" position="relative" minWidth={80}>
        <Flex ml={4}>
          <Box>
            <Button onClick={() => setOpenOverlay(!openOverlay)} display="block" width={30}>
              Click me!
            </Button>
            {openOverlay && (
              <Overlay height={50} borderRadius={2} p={3} mt={0.5} b={1}>
                overlay box
              </Overlay>
            )}
          </Box>
        </Flex>
      </Box>
    </Flex>
  );
}

Props

onPositionChange — called with the measured page position, so a caller can decide to open upwards instead.
adjustTranslateX / adjustTranslateY — CSS lengths added to that position.
matchWidth — on by default: the layer takes the measured width of the space it was declared in, which is what lines a dropdown popup up with its trigger. Turn it off for content that should size to itself.
Every Box prop, applied to the layer's content.