CSS: overflow-y: scroll; overflow-x: visible

Question

See the following post for a picture highlighting my question and a potential solution:

CSS overflow-y:visible, overflow-x:scroll

However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.

See here for a demo of the bug: http://jsfiddle.net/narcV/4/

Any ideas how I can make the tooltips display next to the child div at all times?

Answer 1

I guess you should use position:absolute instead of position:fixed.

.parent { overflow-y:scroll; width:100%; height:100px; }
.child { position:relative; }
.child .child-menu { position: absolute; left: 80px;width:200px; top:0px; border: 1px solid black; background-color: green; display: none; }
.child:hover .child-menu { display: block; }

Fiddle demo, http://jsfiddle.net/68fBE/2/

Answer 2

I ended up implementing this using javascript, using the getPos function from this question.

The end product looks like:

var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
   var hovered = e.srcElement;
   var pos = getPos(hovered);
   pos.x += hovered.offsetWidth;
   pos.y -= scrollPanel.scrollTop;
   tooltip.style.setProperty('left', pos.x);
   tooltip.style.setProperty('top', pos.y);
}

Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.

Too bad there's no elegant/CSS way to do this, but at least this works.