search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Hidding an Event Bubble when scrolling a Calendar

Asked by Julien
20 days ago.

I use:

bubble: new DayPilot.Bubble({
  showAfter: 10,
  animation: 'fast',
}),

On a DayPilot.Calendar.

My issue is that when such Bubble is displayed and the user scrolls the calendar (which has a specific height), the Bubble stays visible but doesn’t follow the Event it is associated with.

I’ve tried adding a listener to a “scroll” event in order to hide any visible Bubble, but without success.

Any tip?

Answer posted by Dan Letecky [DayPilot]
19 days ago.

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.

Comment posted by Julien
19 days ago.

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!

Comment posted by Dan Letecky [DayPilot]
19 days ago.

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.

Comment posted by Julien
19 days ago.

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?

Comment posted by Dan Letecky [DayPilot]
18 days ago.

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).

Comment posted by Julien
18 days ago.

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.

Comment posted by Dan Letecky [DayPilot]
18 days ago.

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.

Comment posted by Julien
17 days ago.

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.

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):