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?

This is not a bug: `position: fixed` always positions an element relative to the viewport, and not to its closest `position: relative` container. There's something odd about the question you link to as well: the title doesn't tally with the given code (it's *also* `overflow-y: scroll; overflow-x: visible`!), and I can't tell why the self-answer says to use `position: fixed`. — BoltClock, Apr 10 '12 at 05:57
Yeah; I think that the title of that post is a typo. I'm not saying that `position: fixed;` is broken, but rather the solution in the referenced post is buggy (because, `position: fixed;` behaves exactly as you describe) — Chuck, Apr 10 '12 at 06:05

score 1 · Accepted Answer · edited May 23 '17 at 11:54

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.

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

1 Answers1