Hidding an Event Bubble when scrolling a Calendar

The bubble hides if the cursor is moved outside of the source object and the bubble itself.

I assume that in your scenario, the cursor stays inside but the calendar scrolls. Is that correct?

The context menu (DayPilot.Menu) is more sensitive to its position becoming invalid, as it remains visible until you click. It hanldes the wheel event to hide the menu.

Yes, the bubble hides when scrolling and the cursor moves outside the source object, but it is not hiding immediately. This leads to a weird UI, where the bubble is visible at a random location for a second or so. I guess I could lower the the fading out delay, but I’d like to keep it as it it for common situations (no scrolling).

When the cursor stays over the source object while scrolling (a long Event): the bubble then doesn’t stick to its launching position relatively to the Event but I feel it’s okay.

A general solution for my cases, without having to move the bubble, would be to have a way to hide all the bubbles, immediately, when scrolling is detected. But I don’t know how to detect that!

Thanks for the update.

In the latest sandbox build (2025.4.6668), the bubble now gets hidden on the wheel event as well. This should fix your problem.

If you want to hide the bubble faster, you can set a lower value of the hideAfter property. The minimum value is 1. Setting it to 0 disables hiding the bubble on mouseleave.

Please let me know if it doesn’t work as expected.

Thanks for the time! It works but it’s not perfect. I’m able to trigger some cases where the bubble is outside the source Event but doesn’t even close after a while…

- Create a long event
- Mouse over the Event near the bottom
- Scroll a bit toward the top while keeping the cursor over the Event.

For some reason, even using those steps, sometimes it works well and sometimes the bubble is not at the proper location and doesn’t close.

Maybe if there were an option for the bubble to be launched only “onmouseenter” that would help?

And how do you scroll?

The wheel event is fired for mouse wheel and touchpad scrolling. In these cases, the bubble should be closed immediately (and that’s what I’m seeing in my tests).

I scroll with the mouse wheel.

The bubble does indeed close immediately, but opens again if the cursor is still over the Event after the scrolling ends… It is then sometimes at the wrong location.

Does it still happen if you disable the animation?

The bubble popup is delayed. The reference position is resolved when it actually starts to appear, but it’s not recalculated when the animation is finished. It looks like if you scroll using the mouse wheel and move the mouse at the same time and the animation is turned on, the location may be off.

You are right that I have to move the mouse in addition to scrolling for the bubble to reappear (sometimes at the wrong location).

Using:

bubble: new DayPilot.Bubble({
  showAfter: 0,
  animated: false,
}),

doesn’t help.

By the way, I would not call this issue a very big one, if the fix is not easy.