Cannot detect mouse over of a background event in month view if another background event is on the same row

[laoneo]

Bug Reports

I'm using tippy as tooltip library. So far it works. But when I do rendering as background thourgh the even objects properties, then it renders only the last element. This due the fact that per event one element is rendered above each other.

I'v opened an issue on tippy itself but the maintainer there reported back that some listeners do need to be reapplied. Here you can see the full report atomiks/tippyjs#529.

I'v prepared a code pen where you can see the issue https://codepen.io/anon/pen/rEGaZo. The problem is that when hovering over the second event, the tooltip doesn't show up. Is there something can be done here in fullcalendar?

[acerix]

I can see the second background event adds a "skeleton" over the entire row (week) which prevents detecting when the mouse is over the first background event since it's covered.

Setting "pointer-events: none;" on the skeleton seems to work:

https://codepen.io/acerix/pen/dBVjrQ?editors=0111

[laoneo]

Thanks for confirmation. Are you guys going to fix it or should I do a pr or is it expected that the users should add the remaining CSS to their app?

[arshaw]

we decided to do background event rendering like this b/c it plays better with print-mode, but we might walk that back decision (might refactor how event DOM/CSS works). Until then, @acerix 's workaround is your best bet.

[arshaw]

To fix this more quickly, I'll force FullCalendar to apply pointer-events:none on these dummy cells that are blocking the real events.

[arshaw]

This was fixed in 4.3.0 though please start using 4.3.1
Releases: https://github.com/fullcalendar/fullcalendar/releases

@laoneo can you confirm that things are all good?

[laoneo]

Yes, it works. Just wondering if it could be solved with changes in the CSS file, instead of hardcoding directly into the HTML code within the JS file.

[acerix]

I had to come back to this for a related issue and noticed the new release doesn't fix my codepen so there might still be an issue:

https://codepen.io/acerix/pen/abbyygN?editors=0110