student student - 4 months ago 13
Javascript Question

dxTooltip not working in IE, working in Chrome

I have got a

dxChart
:

var chart = $("#chartContainer4").dxChart();


of which I’m taking the legend rectangles:

var PayerLegendBoxes = $("#chartContainer4 .dxc-legend g rect");


And using
dxTooltip
for showing on mouse hover.

PayerLegendBoxes.each(function () {



var nextElementHTML = this.nextSibling.innerHTML;

var currElementTip = nextElementHTML + "tip";

var currElement = this;



var title = chart.append("<span style='display:none;' id=" + currElementTip + ">" + nextElementHTML + "</span>");



var tooltipSimple = $("#" + currElementTip).dxTooltip({

target: currElement,

}).dxTooltip("instance");



$(currElement).unbind().hover(function () {

tooltipSimple.toggle()

});



});


This is working fine in Chrome but not in IE.

Is there a bug for cross browser functionality?

Answer

Looks like the problem is in this line:

var nextElementHTML = this.nextSibling.innerHTML;

nextSibling.innerHTML returns undefined in IE. So, I suggest you use something like this:

// jQuery provides a "cross-browser" way here
var nextElementHTML = $(this).next().text();

And one more correction for this line:

var currElementTip = nextElementHTML + "tip";

nextElementHTML can sometimes contain a white space symbol. So, you should sanitize it:

var currElementTip = (nextElementHTML + "tip").replace(/\s/g, "_");

The updated sample is here - http://jsfiddle.net/5y8f4zt0/

Comments