Dhtmlx Scheduler ToolTip Issue In IE11

hi,
i am unable to get tooltip in ie11 , kindly help me on it.
ie11 with windows8.1 it is not coming.

Hi,
tooltips seems working correctly in our online samples. They might be disabled if your device is recognized as a touch-screen device - seems like it happens on a touch-screen laptops in IE11. Try enabling tooltips manually with this config scheduler.config.touch_tooltip = true;

Hi,
I am having weird issue with tooltip and IE 11 -> 11.447.14393.0.
When I use the Emulation from IE and change the User agent string to Internet Explorer 10 the tooltip works and I see the data pops out. However when I change back to IE 11 or when I start my IE 11 at first place the tooltip is not being fired.
What can cause this issue?

The following code is dhtmlxscheduler_tooltip.js
/*
@license
dhtmlxScheduler v.4.3.35 Professional

This software is covered by DHTMLX Enterprise License. Usage without proper license is prohibited.

© Dinamenta, UAB.
*/
Scheduler.plugin(function(scheduler){

(function(){

var dhtmlXTooltip = scheduler.dhtmlXTooltip = scheduler.tooltip = {};

dhtmlXTooltip.config = {
className: ‘dhtmlXTooltip tooltip’,
timeout_to_display: 50,
timeout_to_hide: 50,
delta_x: 15,
delta_y: -20
};

dhtmlXTooltip.tooltip = document.createElement(‘div’);
dhtmlXTooltip.tooltip.className = dhtmlXTooltip.config.className;

dhtmlXTooltip.show = function(event, text) { //browser event, text to display
if (scheduler.config.touch && !scheduler.config.touch_tooltip) return;

var dhxTooltip = dhtmlXTooltip;
var tooltip_div = this.tooltip;
var tooltip_div_style = tooltip_div.style;
dhxTooltip.tooltip.className = dhxTooltip.config.className;
var pos = this.position(event);

var target = event.target || event.srcElement;
// if we are over tooltip -- do nothing, just return (so tooltip won't move)
if (this.isTooltip(target)) {
	return;
}

var actual_x = pos.x + (dhxTooltip.config.delta_x || 0);
var actual_y = pos.y - (dhxTooltip.config.delta_y || 0);

tooltip_div_style.visibility = "hidden";

if (tooltip_div_style.removeAttribute) {
	tooltip_div_style.removeAttribute("right");
	tooltip_div_style.removeAttribute("bottom");
} else {
	tooltip_div_style.removeProperty("right");
	tooltip_div_style.removeProperty("bottom");
}

tooltip_div_style.left = "0";
tooltip_div_style.top = "0";

this.tooltip.innerHTML = text;
//document.body.appendChild(this.tooltip);

var tooltip_width = this.tooltip.offsetWidth;
var tooltip_height = this.tooltip.offsetHeight;

if ((document.body.offsetWidth - actual_x - tooltip_width) < 0) { // tooltip is out of the right page bound
	if(tooltip_div_style.removeAttribute)
		tooltip_div_style.removeAttribute("left");
	else
		tooltip_div_style.removeProperty("left");
	tooltip_div_style.right = (document.body.offsetWidth - actual_x + 2 * (dhxTooltip.config.delta_x||0)) + "px";
} else {
	if (actual_x < 0) {
		// tooltips is out of the left page bound
		tooltip_div_style.left = (pos.x + Math.abs(dhxTooltip.config.delta_x||0)) + "px";
	} else {
		// normal situation
		tooltip_div_style.left = actual_x + "px";
	}
}

if ((document.body.offsetHeight - actual_y - tooltip_height) < 0) { // tooltip is below bottom of the page
	if(tooltip_div_style.removeAttribute)
		tooltip_div_style.removeAttribute("top");
	else
		tooltip_div_style.removeProperty("top");
	tooltip_div_style.bottom = (document.body.offsetHeight - actual_y - 2 * (dhxTooltip.config.delta_y||0)) + "px";
} else {
	if (actual_y < 0) {
		// tooltip is higher then top of the page
		tooltip_div_style.top = (pos.y + Math.abs(dhxTooltip.config.delta_y||0)) + "px";
	} else {
		// normal situation
		tooltip_div_style.top = actual_y + "px";
	}
}

tooltip_div_style.visibility = "visible";
this.tooltip.onmouseleave = function(e){
	e = e || window.event;
	/*
	 A rare but reported scenario, when tooltip appears at the edge of the scheduler (e.g. left part inside cal, right part - outside).
	 User moves mouse from the scheduler into the tooltip, and then from the tooltip to the page outside the calendar.
	 As a result - tooltip freezes and no longer reacts until mouse reenters the calendar.
	*/
	var tooltip = scheduler.dhtmlXTooltip;

	var node = e.relatedTarget;
	while (node != scheduler._obj && node) {
		node = node.parentNode;
	}

	if(node != scheduler._obj)
		tooltip.delay(tooltip.hide, tooltip, [], tooltip.config.timeout_to_hide);
};

scheduler.callEvent("onTooltipDisplayed", [this.tooltip, this.tooltip.event_id]);

};
dhtmlXTooltip._clearTimeout = function(){
if(this.tooltip._timeout_id) {
window.clearTimeout(this.tooltip._timeout_id);
}
};

dhtmlXTooltip.hide = function() {
if (this.tooltip.parentNode) {
var event_id = this.tooltip.event_id;
this.tooltip.event_id = null;
this.tooltip.onmouseleave = null;
this.tooltip.parentNode.removeChild(this.tooltip);
scheduler.callEvent(“onAfterTooltip”, [event_id]);
}
this._clearTimeout();
};
dhtmlXTooltip.delay = function(method, object, params, delay) {
this._clearTimeout();
this.tooltip._timeout_id = setTimeout(function() {
var ret = method.apply(object, params);
method = object = params = null;
return ret;
}, delay || this.config.timeout_to_display);
};

dhtmlXTooltip.isTooltip = function(node) {
var res = false;
if (scheduler._getClassName(node).split(" ")[0] == “dhtmlXTooltip”) {
//debugger;
}
while (node && !res) {
res = (node.className == this.tooltip.className);
node = node.parentNode;
}
return res;
};

dhtmlXTooltip.position = function(ev) {
ev = ev || window.event;
if (ev.pageX || ev.pageY) //FF, KHTML
return {x:ev.pageX, y:ev.pageY};
//IE
var d = ((window._isIE) && (document.compatMode != “BackCompat”)) ? document.documentElement : document.body;
return {
x:ev.clientX + d.scrollLeft - d.clientLeft,
y:ev.clientY + d.scrollTop - d.clientTop
};
};

scheduler.attachEvent(“onMouseMove”, function(event_id, e) { // (scheduler event_id, browser event)
var ev = window.event || e;
var target = ev.target || ev.srcElement;
var dhxTooltip = dhtmlXTooltip;

var is_tooltip = dhxTooltip.isTooltip(target);
var is_tooltip_target = (dhxTooltip.isTooltipTarget && dhxTooltip.isTooltipTarget(target));

// if we are over event or tooltip or custom target for tooltip
if (event_id || is_tooltip || is_tooltip_target) {
	var text;

	if (event_id || dhxTooltip.tooltip.event_id) {
		var event = scheduler.getEvent(event_id) || scheduler.getEvent(dhxTooltip.tooltip.event_id);
		if (!event)
			return;

		dhxTooltip.tooltip.event_id = event.id;
		text = scheduler.templates.tooltip_text(event.start_date, event.end_date, event);
		if (!text)
			return dhxTooltip.hide();
	}
	if (is_tooltip_target) {
		text = "";
	}

	var evt;
	if (_isIE) {
		//make a copy of event, will be used in timed call

		evt = {'pageX':undefined,
			'pageY':undefined,
			'clientX':undefined,
			'clientY':undefined,
			'target':undefined,
			'srcElement':undefined
		};
		for(var i in evt){
			evt[i] = ev[i];
		}
	}

	if (!scheduler.callEvent("onBeforeTooltip", [event_id]) || !text)
		return;

	dhxTooltip.delay(dhxTooltip.show, dhxTooltip, [(evt || ev), text]); // showing tooltip
} else {
	dhxTooltip.delay(dhxTooltip.hide, dhxTooltip, [], dhxTooltip.config.timeout_to_hide);
}

});
scheduler.attachEvent(“onBeforeDrag”, function() {
dhtmlXTooltip.hide();
return true;
});
scheduler.attachEvent(“onEventDeleted”, function() {
dhtmlXTooltip.hide();
return true;
});

/* Could be redifined */
scheduler.templates.tooltip_date_format=scheduler.date.date_to_str("%Y-%m-%d %H:%i");

scheduler.templates.tooltip_text = function(start,end,event) {
return "Event: "+event.text+"
Start date: "+scheduler.templates.tooltip_date_format(start)+"
End date: "+scheduler.templates.tooltip_date_format(end);
};
})();

});

Hello,

Code of dhtmlxscheduler_tooltip.js extension is common for all version of Dhtmlx Scheduler.
Does this issue occur in the next sample? We were not able to reproduce it.
docs.dhtmlx.com/scheduler/sample … oltip.html

Thank you for your quick answer!
The link you provided works as expected on chrome, Firefox , edge and even IE 10 . However , the tooltip is not being fired in IE 11 your link has the same problem as i have with my code, I think there is a problem with the plugin in this version. I think to recreate the problem you need to launch IE in the same version as I am using. I have a feeling you will get the same problem . (I tried testing your link on a colleague’s computer with same version of IE and it didn’t work as well).
See attached img with my version of IE.
I hope it is something in the plugin that could be fixed , I have no idea how to handle this bug.
Thanks, looking forward hearing from you.

Hi,
Still waiting on update regarding this issue.
As I mentioned previously the link provided by you isnt working in IE 11 the latest version.
Thanks.

Sounds to me like an IE11 issue, not an DHTMLX issue ?!

Does this issue occur for all samples of the scheduler, or only for some specific one?
In the second case please share the link where the issue can be checked.

Also, please be sure that you change both “document mode” and “user agent string” when testing different versions of ie. Changing only one may break correct version|feature detection.

Hi,
Just to clarify I always make sure i use same number of version in the document mode and in the user agent string.
This occurs in the tooltip sample as well. when i change to IE10 it works with IE11 it is not working.
Also If you would like to refer me to a specific sample for testing I would be happy to do so as you have quite a few samples it would take long time for me to go over all of them and test.
Thanks.

Hi,

The same sample works for us in IE :frowning:
If this issue is critical for you, please open a ticket at support.dhtmlx.com, we can provide an instrumented version of dhtmlxscheduler which will log details about tooltip rendering process and will allow finding the reason of the issue. Most probably, it is something specific to you OS/Hardware, but it hard to suggest anything with the existing data.

Also, by any chance are you using Skype plugin for IE? Such kind of plugin mess with HTML code of a page and can cause a similar issue.