Hi,
We use feature "eventTooltip" and "tooltipRenderer" making async calls to a service before showing the tooltip contents. After upgrading to 2.1.X the tooltip just blinks and makes like 30 requests per seconds. Is this a bug or should we change something?
Support Forum
I can't seem to reproduce the issue in your code. Here is my try:
That is basically the exact way we use it. Is there another way that you think is better?
import { Scheduler,DateHelper } from '../../build/scheduler.module.js?433475';
import shared from '../_shared/shared.module.js?433475';
/* eslint-disable no-unused-vars */
//region Data
var _handleRemoteTooltip = function(tip) {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(function(response) {
return response.json();
})
.then(function(json) {
var old;
tip.html = json.title;
old = tip.getHtml;
tip.getHtml = null;
tip.realign();
tip.getHtml = old;
});
return false;
};
let resources = [
{ id : 'r1', name : 'Mike', image : 'mike.jpg' },
{ id : 'r2', name : 'Celia', image : 'celia.jpg' },
],
events = [
{
resourceId : 'r1',
startDate : new Date(2017, 0, 1, 10),
duration : 2,
durationUnit : 'h',
name : 'Review website',
note : `<a href="//www.google.com" target="_blank">Link to website</a>`,
iconCls : 'b-fa b-fa-mouse-pointer'
},
{
resourceId : 'r2',
startDate : new Date(2017, 0, 1, 12),
duration : 1.5,
durationUnit : 'h',
name : 'Bryntum onsite meeting',
note : '<a href="https://www.google.se/maps/place/Bryntum/@59.3340293,18.0662579,15z/data=!4m2!3m1!1s0x0:0xc76e8fef322e5c57?ved=2ahUKEwiche7e0aveAhXRh6YKHUoLDvcQ_BIwDXoECAcQCw" target="_blank"><i style="margin-right:5px" class="b-fa b-fa-globe"></i>Map link</a>',
iconCls : 'b-fa b-fa-arrows'
},
];
//endregion
let scheduler = new Scheduler({
appendTo : 'container',
minHeight : '20em',
resources : resources,
events : events,
startDate : new Date(2017, 0, 1, 6),
endDate : new Date(2017, 0, 1, 20),
viewPreset : 'hourAndDay',
features : {
eventTooltip : {
hideOnDelegateChange: true,
hoverDelay: 700,
showOnHover: false,
template: function(data) {
return _handleRemoteTooltip(data.tip);
},
}
},
columns : [
{ text : 'Name', field : 'name', width : 130 }
]
});
EventTooltip feature doesn't support showing async content. The way you implemented it looks more like a workaround than a proper solution. And I can see the blinking you described. I've created a feature request to support it out of the box. https://app.assembla.com/spaces/bryntum/tickets/8775-add-async-tooltip-support-to-eventtooltip-feature/details
Though our Tooltip widget supports async content. So I would recommend to implement your own tooltip and turn of our feature which is enabled by default. Here is a proof of concept, you can try in our Basic demo.
Let me know please how it works for you!
Cheers,
Pavel
Though our Tooltip widget supports async content. So I would recommend to implement your own tooltip and turn of our feature which is enabled by default. Here is a proof of concept, you can try in our Basic demo.
const tip = new Tooltip({
forSelector : '.b-sch-event',
listeners : {
beforeShow : ({ source : tip }) => {
tip.html = false;
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(function(response) {
return response.json();
})
.then(function(json) {
tip.html = json.title;
});
}
}
});
let scheduler = new Scheduler({
features : {
eventTooltip : false
},
....
Cheers,
Pavel
Pavlo Miklashevych
Sr. Frontend Developer
Please use activeTarget to get event record from DOM element.
const tip = new Tooltip({
forSelector : '.b-sch-event',
listeners : {
beforeShow : ({ source : tip }) => {
const eventRecord = scheduler.resolveEventRecord(tip.activeTarget);
...
Pavlo Miklashevych
Sr. Frontend Developer