barone
Posts: 1
Joined: Wed Nov 16, 2011 3:39 am

Tooltip rendering in IE 9

I have the following for tooltip set in my chart:

tooltip: {
crosshairs: true,
formatter: function () {
return '<b>' + Highcharts.dateFormat('%m/%d/%Y %l:%M:%S %p', this.x) + '</b><br/>' +
this.series.name + ': ' + Highcharts.numberFormat(this.y, 2) + metricUnit;
}

However, when viewed within IE9, everything appears on the same line. As if the <br/> is being ignored. Other browsers including IOS shows the tooltip correctly. Anything I can try?
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: Tooltip rendering in IE 9

I don't see the issue here: http://jsfiddle.net/hfrntt/phLJG/1/
Slawek Kolodziej
Highcharts support team
fox
Posts: 15
Joined: Sat Dec 17, 2011 2:50 pm

Re: Tooltip rendering in IE 9

I posted this issue just yesterday too...
http://highslide.com/forum/viewtopic.ph ... tip#p62976

The issue doesn't seem to happen when viewing the jsfiddle, but is there when we view our charts in IE9

Is there a "version" difference between jsfiddle and what we have downloaded from the site?
gerrys0
Posts: 2
Joined: Mon Jan 16, 2012 6:52 pm

Re: Tooltip rendering in IE 9

I have this same issue.

After some debugging, I discovered that removing the "line-height" from my "body" CSS on my webpage (which comes with my CSS grid framework) allows IE to render the tooltip correctly. In the same way, adding this following line:

Code: Select all

<style type="text/css">body {line-height:1.5;}</style>
to the JSfiddle example breaks it.

I have no idea why this would be. Work-around would be to remove the "line-height" attribute, but that's not ideal.

@hfrntt, does this help and can you confirm?

Thanks,
Gerard
fox
Posts: 15
Joined: Sat Dec 17, 2011 2:50 pm

Re: Tooltip rendering in IE 9

gerrys0, your post really helped with coming up with a hack

Ok.. not optimal, but it works for now without looking as bad as without it

In the tooltip setting, set the line height to 120%..

This fixes the tooltip problem where the lines overlap, but also adds some unnecessary space in the legend etc...

If someone has a better approach, it is much welcome

Fox
gerrys0
Posts: 2
Joined: Mon Jan 16, 2012 6:52 pm

Re: Tooltip rendering in IE 9

Similar to @fox, I fixed my problem by adding this line to the HEAD section of my charts page.

Code: Select all

<style type="text/css"> tspan { line-height: 150%; } </style>
kzoon
Posts: 281
Joined: Wed Aug 10, 2011 8:22 am

Re: Tooltip rendering in IE 9

I found a (closed) github issue on this: https://github.com/highslide-software/h ... issues/427

So was the issue closed too soon or has the solution not hit a production release yet?
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: Tooltip rendering in IE 9

Yes but it was fixed on the same day as 2.1.9 was released (see issue: https://github.com/highslide-software/h ... issues/427 and changelog: http://www.highcharts.com/documentation/changelog). I suppose that this issue could be closed after sending a new release. Have you checked current github version?
Slawek Kolodziej
Highcharts support team

Return to “Highcharts Usage”