Tooltips displayed in the wrong place

[tobyink]

See:
https://toby.ink/open-source/

The tooltips appear down and to the right of where they'd be expected.

[IonicaBizau]

Try to set the container to be position: relative. I suggest asking these questions on Stackoverflow and leave a link here.

[tobyink]

That doesn't solve it.

[tobyink]

In fact, that makes the tooltips appear even lower.

[tobyink]

Okay, figured it out. The issue is that the script calculates the tooltip position like this:

                , leftPos = size.left + window.pageXOffset - tooltip.offsetWidth / 2 + size.width / 2
                , topPos = size.bottom + window.pageYOffset - tooltip.offsetHeight - 2 * size.height

So they are calculated relative to the window. They're assuming the calendar (and thus the tooltip) is not positioned inside a container with position:relative. So they'll only display in the right position if the calendar and all its ancestor elements have position:static.

I think the fix is probably to change the calculations to:

                , leftPos = size.left - tooltip.offsetWidth / 2 + size.width / 2
                , topPos = size.bottom - tooltip.offsetHeight - 2 * size.height

And add position:relative to the calendar's outermost wrapper div.