Tooltip cut off because of overflow

Question

I would like to have a tooltip outside a scrolling container (when the tooltip is centered). However the tooltip always cuts off because the scrolling container has an overflow: auto attribute.

This demo I made demonstrates what my issue is: https://jsfiddle.net/ny610aL1/1/

Because of the tooltip, the position: relative is on the item instead. I think this prevents that i move the container outside with css.

Is there any way that this is possible using CSS?

Answer 1

No, you'll have to put the tooltip container outside the overflow container. These dialog layers usually end-up before the closing tag of body for this very reason => positioning.

Tooltip widgets often come with JavaScript libraries attached (jQuery-UI, Bootstrap, ...).

In a CSS only solution, you'll have to be happy with the fact that positioning is not calculated but anticipated.