Portals

A popup inside a container with overflow: hidden gets clipped by that container. Portal renders its children into another part of the page, document.body by default:

<Portal>
<div class="popup">An overlay</div>
</Portal>

Only the DOM location changes. The portal's content still belongs to the component that rendered it: it can read that component's signals and context, and it is removed when that component is.

Use portals for modals, tooltips and menus, anything that has to escape its container's clipping or stacking.

Try it: the popup is cut off by its small container. Wrap it in Portal, imported from @solidjs/web, so it shows in full.

Loading editor…