'Beforetooltipshow' is not getting triggered with high latency

Support for v6.x of our Scheduling components
Post Reply
User avatar
Premium Member
Premium Member
Posts: 1
Joined: Mon Oct 07, 2019 8:14 pm

'Beforetooltipshow' is not getting triggered with high latency

Post by mkirankanth »


We have a scenario where we try to load the data we want to show in a tooltip on an event in the scheduler asynchronously and then once the data is loaded we call 'tip.show()' method to show the tooltip. The call to load the data is made in the 'beforetooltipshow' listener based on the record passed. This is working as long as we work in low latency networks, but once we try to use the scheduler in a high latency network, tooltip stops showing after a few seconds when we try to hover over the events on the scheduler fast.

I was able to repro this issue using the bryntum scheduler in https://fiddle.sencha.com/#view/editor&fiddle/2vtk. To simulate the scenario of high latency, I used the setTimeOut function with 4000 ms.

Repro steps:

1) Change the setTimeOut wait to 4000ms in app.js of https://fiddle.sencha.com/#view/editor&fiddle/2vtk
2) Run the code
2) Hover over the bookings(events) in the scheduler very fast.
3) Observe that after a few seconds beforetooltipshow of the events is not triggered and tooltips dont show anymore. This can be confirmed based on the console.log messages.

Observe that if we set the wait on the setTimeOut function to 50ms, tooltips always show even if we hover over the bookings very fast.

User avatar
Core Developer
Core Developer
Posts: 539
Joined: Mon Dec 24, 2018 9:15 am

Re: 'Beforetooltipshow' is not getting triggered with high latency

Post by sergey.maltsev »


Tip configuration by default has showDelay: 400. This will affect on first beforetooltipshow event call.

See tipCfg info here

You need to avoid consequent setTimeout() calls for one scheduler event record. So you could use some loading flag.

Try this code. This should load custom tip string to mytip data field and then show it for event record.
mytip is loaded once and no redundant setTimeout calls are used.

Code: Select all

        tipCfg : {showDelay: 0, hideDelay: 0},
        listeners: {
            beforetooltipshow: function (sch, r) {
                if(r.get('mytip')) {
                    sch.tooltipTpl = new Ext.Template(r.get('mytip'));
                    return true;
                if (!r.loading) {
                    r.loading = true;
                    setTimeout(() => {
                        r.loading = false;
                        r.set('mytip', `MyTip for ${r.getId()}`);
                    }, 2000);

                return false;

Post Reply