[INFO REQ] Show calendar event tooltip on hover but also on tap (on mobile devices)

[lxxrxns]

Hey there!

In scheduler, you can mouseOver an event on PC to show the tooltip, but also tap on it with your finger (on mobile) to show the tooltip.

Because calendar seems to work differently (it doesn't even have a 'showOn' parameter, it just works intuitively), I can choose 'hover' or 'click'.
'Hover' works as intended on PC: I mouseOver the event, and it shows the tooltip. I mouseOut and it hides the tooltip again. However, 'hover' doesn't show the tooltip on mobile when I tap the event (since 'hovering' isn't possible on mobile).

Is there any way I can have the tooltip behave the same on mobile as it behaves in scheduler?

Thanks!

Laurens

[marcio]

Hey Laurens,

As you'll see in the video attached of our tooltip demo, that you can try it here https://bryntum.com/products/scheduler/docs/api/Core/widget/Tooltip

The tooltip is triggered on mobile on long press action and not tap/click.

[lxxrxns]

I have the eventTooltip enabled with showOn: 'hover'. It works on PC, but on mobile it doesn't work. When I longpress the event on mobile, Chrome just selects the text on the event (even when I try to long press next to the text).

Screen_Recording_20230203_205154_Chrome.mp4

Doesn't work in calendar

(756.2 KiB) Downloaded 239 times

Screen_Recording_20230203_205218_Chrome.mp4

Works fine in scheduler

(962.16 KiB) Downloaded 264 times

[lxxrxns]

You might say: in Scheduler you have it set to show on "click", but this is not the case: on PC the tooltip shows when I hover, so this is the exact behaviour that I want:

Show tooltip on hover on PC, and show tooltip on tap on mobile.

It's possible in scheduler, how do I get it to work in calendar?

Also, setting the "showOn" to 'click' is not an option (this makes it work on mobile, but I want the hover effect on PC)

[marcio]

Hey, how did you configure your eventTooltip on Scheduler?? I tested in our demo page (where we have a hover tooltip enabled) and it didn't appear in the mobile on tap, could you please share how did you configure that on your Scheduler and your Calendar??

https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/EventTooltip

[lxxrxns]

Apparently this is something that changed in one of the later versions. I am on version 4.2, and in v4.2 you can "tap" an event on mobile (in Scheduler) to show the tooltip.

[marcio]

Thanks for the info Laurens,

I created a ticket to check what changed and fix that behavior on our side - https://github.com/bryntum/support/issues/6125

[Animal]

The functionality in Calendar has not changed since its inception.

Click shows the EventTooltip by default.

You can configure the Calendar's eventTooltip feature with showOn : 'hover' (You stated previously "it doesn't even have a 'showOn' parameter")

The only difference then ,between Scheduler and Calendar is that the show of the context menu arising from the longpress conversion to contextmenu event causes the tooltip to hide.

That difference I can fix.

So now you can get both to show. Obviously, depending on the align configuration of the tooltip and the position of the "hover" target and constraining the menu and tooltip to show within the screen boundaries they can interfere with each other:

Screenshot 2023-12-01 at 10.45.21.png (320.04 KiB) Viewed 2922 times

And don't forget that longpress also enters the dragging state on touch platforms, so when doing this you have to be extremely careful not to wobble your finger otherwise the event will be moved.

All in all, we can make the best of a bad job. But on touch devices, when all you have is one touchpoint, there's not really a perfect solution.

I will fix the error of the event tooltip hiding when the context menu appears.

So the situation will in all products be that longpress triggers both a mouseover and a contextmenu event. The two floating widgets may overlap each other, but there's not really much we can do about that.

The app should configure the tooltip to be above its target, so that by default they will not overlap. But when the event is at the bottom of the screen, the context menu will be forced upwards and then may overlay the tooltip.

[Animal]

You can of course choose how your app should invoke the tooltip in your configuration:

new Calendar({
    features : {
        eventTooltip : {
            // Show on click on touch platforms, and hover on mouse platforms
            showOn : globalThis.matchMedia('(pointer:coarse)').matches ? 'click' : 'hover'
        }
    }
});

or

new Calendar({
    features : {
        eventTooltip : {
            // Show on click on touch platforms, and hover on mouse platforms
            showOn : BrowserHelper.isTouchDevice ? 'click' : 'hover'
        }
    }
});

BrowserHelper does that media query.