While it looks difficult to change event tip behavior, you can implement your own tip using two events: eventmouseover and eventmouseout
Basic idea is as follows:
1. diable default tip, if it doesn't work like you expect
2. implement own scheduler feature which would listen to events above to show/hide tip
Found a way to apply a style and remove that style when the tooltip is hiding.
happy case.gif (714.13 KiB) Viewed 2046 times
But as you can see from the below gif, it will not trigger the HIDE event if you move the cursor across the tooltip and then goes to an new event.
sad case.gif (776.09 KiB) Viewed 2046 times
my code is,
class RmsEventTooltip extends InstancePlugin {
client: any;
tip: any;
activeRecord: any;
static get pluginConfig() {
return {
chain: ['render']
};
}
construct(client, config) {
super.construct(client, config);
client.on({
eventmouseover: this.onEventMouseOver,
eventmouseout: this.onEventMouseOut,
thisObj: this
});
}
render() {
const client = this.client;
this.tip = new Tooltip({
forSelector: '.b-sch-event',
scrollAction: 'hide', // hide the widget when scroll
forElement: client.timeAxisSubGridElement,
showOnHover: true,
hoverDelay: 0,
hideDelay: 100,
anchorToTarget: false,
// floating: true, // hide tooltip when the dom scrolls
// positioned: true,
// anchor: true,
// trackMouse: true,
// scrollAction: realign,
allowOver: true,
// align: 'l-r',
style: { fontSize: '0.85rem' },
mouseOffsetX: 2,
mouseOffsetY: 2,
listeners: {
hide: this.removeEventSelectedStyle.bind(this)
// destroy : this.removeEventSelectedStyle.bind(this) // <<<<<<<<this event does not work for some reason
}
});
}
// Remove the applied styles from the active event, when the tooltip hide
removeEventSelectedStyle() {
console.log('removeEventSelected');
const element = this.client.getElementFromEventRecord(this.activeRecord);
element.classList.remove('b-sch-event-selected');
this.activeRecord = null;
}
onEventMouseOver({ eventRecord }) {
this.activeRecord = eventRecord;
this.tip.show();
this.tip.html = 'Loading';
makeEventTootip(eventRecord).then(response => {
this.tip.html = response;
});
// Make the active record highlighted until the tooltip is open
const element = this.client.getElementFromEventRecord(this.activeRecord);
element.classList.add('b-sch-event-selected');
}
onEventMouseOut() {
// this.activeRecord = null;
}
}
GridFeatureManager.registerFeature(RmsEventTooltip, true, 'Scheduler');
anyhow these are the methods i have tried. But no luck in any of these.
if i can show the arrow tip anchored to the related event, everything will be fine.
Another option is to extend TooltipBase and implement the logic you need. TooltipBase already uses the "clippedBy" config. That would be the proper way to achieve your goal.
Please also keep in mind, the extra capability Tooltip has over Popup is the various ways it can be pointed at a target and be sensitive to mouseovers and mouseouts and timings. If you don't need that extra things, you can just listen to mouseover and show a Popup.