Popper Logo
Popper Logo


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.

Don't mind tech-related ads? Consider disabling your ad-blocker to help us!
They are small and unobtrusive.
Alternatively, support us on Open Collective!

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:

/* 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.


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





This modifier currently has no options.


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,
Edit this page
© 2021 MIT License