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

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