The future of Popper is here! Floating UI is now available. Get it now!
Popper Logo
Popper Logo

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.

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.

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.

Reference
Tooltip

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,
};
Edit this page
Flip
© 2024 MIT License