How to give popper.js popper-box margin/ padding so it wont stick to the window borders

Question

I want to give a popper-box (tooltip) a padding to the window. So it has an offset to the window frame and does not stick at the edges

I tried to achieve this by adding a padding/ margin/ transparent border to the popper-box. But all of these approaches have the downside that the arrow is being offsetted by the margin/ padding: https://jsfiddle.net/hq3tLf9k/ arrow being pushed down by 20px

the following approach was to have an inner div that has this padding/ margin applied and leave the parent box untouched: https://jsfiddle.net/dz2ayntf/

this works for the positioning of the arrow, but I also want to animate-in the popper box (slide in) using a css transition: transform, transform: translate(0, 10px). This transition should apply to both, the box and the arrow. transfom: translate unfortunately creates a relative position context and the position of the arrow is offsetted by the margin. https://jsfiddle.net/dz2ayntf/1/

So back to the original question:

• how to have the popper-box not stick to the browser window edges, (padding)
• transform: translate on box including the arrow

Answer 1

found the solution:

The popper.js modifier preventOverflow takes an object where you can pass options width a padding, this will be the distance to the "overflow element" here, the viewport

api documentation: https://popper.js.org/docs/v2/modifiers/prevent-overflow/#padding

https://jsfiddle.net/ynbad02x/

  var state = Popper.createPopper(reference, popper, {
    placement: 'right',
    modifiers: [{

      name: 'preventOverflow',
        options: {
        altAxis: true,
        padding: 40
      },
     }] 
  });

the popover box has 40px padding to the edge, while scrolling