How To Hide Popper If Reference Outside View

The PopperJS element has an attribute which keeps track of the visibility of its reference element. Naturally, we can make use of this to conditionally hide our Popper.

&[data-popper-reference-hidden='true'] {
  opacity: 0;
  pointer-events: none;
}

Optionally, we can add some animation to the transition.

transition: opacity .15s ease-out;