As soon as the scrollbar is activated the arrow indicator leaves its central position above the tooltip and shifts to the side by the width of the scrollbar.
The arrow is created additionally to the tooltip using bootstrap.
Therefore the notation looks like this:
function arrowGenerator(color) {
return {
'&[x-placement*="bottom"] $arrow': {
top: 0,
left: 0,
marginTop: "-0.95em",
width: "3em",
height: "1em",
"&::before": {
borderWidth: "0 1em 1em 1em",
borderColor: `transparent transparent ${color} transparent`,
},
},
'&[x-placement*="top"] $arrow': {
bottom: 0,
left: 0,
marginBottom: "-0.95em",
width: "3em",
height: "1em",
"&::before": {
borderWidth: "1em 1em 0 1em",
borderColor: `${color} transparent transparent transparent`,
},
},
'&[x-placement*="right"] $arrow': {
left: 0,
marginLeft: "-0.95em",
height: "3em",
width: "1em",
"&::before": {
borderWidth: "1em 1em 1em 0",
borderColor: `transparent ${color} transparent transparent`,
},
},
'&[x-placement*="left"] $arrow': {
right: 0,
marginRight: "-0.95em",
height: "3em",
width: "1em",
"&::before": {
borderWidth: "1em 0 1em 1em",
borderColor: `transparent transparent transparent ${color}`,
},
},
};
}
The vertical scrollbar is only supposed to be visible when needed.
What I have tried:
I have tried variates of overflow-values. Also, the often suggested approaching adopting margin according to the scrollbar wouldn't work so far.