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.

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.

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.

Phase

main

Options

This modifier currently has no options.

Data

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,
};