Tooltip does not disappear when element is scrolled out of view, it should have closed on its own.
Codepen link: codepenlink

tippy('button', {
  content: 'a long tooltip here',
  popperOptions: {
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          boundariesElement: 'viewport'
        }
      },
      {
        name: 'hide',
        options: {
          enabled: true
        },
      }
    ]
  }
});

HTML:

<div class="scroll">
  <button>Button</button>
  <div class="content"></div>
</div>

CSS:

html, body {
  height: 100%;
}

.tippy-popper[x-out-of-boundaries] .tippy-tooltip {
  display: none !important;
}

Use tab key to focus on the button, and when the tooltip is displayed, use arrow keys to scroll down. The button is scrolled out of view but the tooltip still persists. It should have closed on its own as soon as the element was scrolled out, this happens in mui tooltips.
I have used prevent overflow and hide modifiers as well, but they don’t seem to work and tippy-popper is not attached and x-out-of-boundaries property is never added.
Please suggest a workaround for this.