Popper.js 隐藏（Hide）

隐藏修饰符可以让你隐藏popper，如果它看起来与它的引用元素分离，或者没有附加到任何东西。当引用元素在滚动容器中，而popper在不同的上下文中时，可能会发生这种情况。

它为state.attributes添加了属性:

• data-popper-reference-hidden:当引用元素被完全剪切并从视图中隐藏时，这个属性将被应用到 popper，这将导致popper看起来没有附加任何东西。
• data-popper- escaping:当 popper: 转义引用元素的边界时，这个属性被应用(因此它看起来是分离的)。

隐藏 popper，应用的一些 CSS:

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

注意:避免使用像 display: none 这样的属性。这不允许 Popper 读取它的维度，这会导致抖动问题。

演示

当popper转义引用的剪切容器时，popper变成部分透明。当引用完全隐藏时，它就变成不可见的。

阶段

main

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