search

Bloggify / github-calendar

:bar_chart: Embed your GitHub calendar everywhere.
https://bloggify.github.io/github-calendar/example/
MIT License
1.23k stars 213 forks source link

Tooltips displayed in the wrong place #127

Closed tobyink closed 3 years ago

tobyink commented 3 years ago

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

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

IonicaBizau commented 3 years ago

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

tobyink commented 3 years ago

That doesn't solve it.

tobyink commented 3 years ago

In fact, that makes the tooltips appear even lower.

tobyink commented 3 years ago

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.