Hi there,
Your css rule does exactly what you would expect it to do. Your problem arises because the tooltip is actually multiple nested elements, of which you are moving the innermost one by 50px.
The “selector” class you are interested in would be dash-tooltip or one of its descendants.
Unfortunately the element disappears immediately from the browser inspector when leaving with the mouse and I don’t know how to make it stick, so I can’t really tell you how it’s organized inside this first container…
Shifting the container by a fixed value could however prove to be messy, as its position is set in absolute coordinates in the internal CSS rules.
I don’t know what you’re planning to do, but could it be a solution to set the width of your tooltip (See my last answer here) and padding your dropdown values via CSS so that the tooltip will overlap this empty padding? From your screenshot it looks like you have more than enough space to arrange things without necessarily having to touch the tooltip position.
It could also be cool to have the tooltip pop up above the cell instead of below, but I personally didn’t have the need for it and never tried figuring out if it’s possible. You may have to tag the core devs around @adamschroeder to find out more about this.
Good luck!