---
navigationLabel: Hide
order: 5
---

import { HideDemo } from '../../../../components/Demos';

# Hide

The `hide` modifier lets you hide the popper if it appears to be detached from
its reference element, or attached to nothing at all. This can occur when the
reference element is inside a scrolling container and the popper is in a
different context.

<x-ad />

It adds attributes to `state.attributes`:

- `data-popper-reference-hidden`: This attribute gets applied to the popper when
  the reference element is fully clipped and hidden from view, which causes the
  popper to appear to be attached to nothing.
- `data-popper-escaped`: This attribute gets applied when the popper escapes the
  reference element's boundary (and so it appears detached).

To hide the popper, apply some CSS:

```css
/* Hide the popper when the reference is hidden */
#popper[data-popper-reference-hidden] {
  visibility: hidden;
  pointer-events: none;
}
```

> **Note:** avoid using properties like `display: none`. This doesn't allow
> Popper to read its dimensions which can cause jitter issues.

## Demo

The popper turns partially transparent when the popper escapes the reference's
clipping container. It then becomes invisible when the reference is hidden
entirely.

<HideDemo />

## Phase

`main`

## Options

This modifier currently has no options.

## Data

```flow
type Data = {
  isReferenceHidden: boolean,
  hasPopperEscaped: boolean,
  referenceClippingOffsets: Offsets,
  popperEscapeOffsets: Offsets,
};

// A positive number indicates it's overflowing on that side
type Offsets = {
  top: number,
  right: number,
  bottom: number,
  left: number,
};
```
