Point's background color doesn't persist during mouse hover event (IE only)

[kamilkulig]

It happens only when tooltip.useHTML === true.

Expected behaviour

After hovering on a certain area on the map, it's color should be changed to hover state color and maintain as long as mouse remains inside this area.

Actual behaviour

After hover event within area (except hovering on the area label - then everything works fine) hover color appears as it should and immediately after that it changes back to unhover state color. When mouse is moved again just a bit, hover state color appears and disappears again.

Live demo with steps to reproduce

http://jsfiddle.net/primerano/m45h1ds5/

Hover mouse in any sate beyond the state name label. Don't move the mouse for a moment. Wait until color changes to unhover state color and move mouse again.

Affected browser(s)

IE, Edge

[TorsteinHonsi]

It comes from tooltip.useHTML.

Minimal demo:

http://jsfiddle.net/m45h1ds5/2/

[TorsteinHonsi]

It comes from tooltip.useHTML.

Minimal demo:

http://jsfiddle.net/m45h1ds5/2/

[TorsteinHonsi]

In the OP's example there doesn't seem to be a reason for using HTML in the tooltip, so we can work around the issue by removing that option: http://jsfiddle.net/primerano/m45h1ds5/

[TorsteinHonsi]

In the OP's example there doesn't seem to be a reason for using HTML in the tooltip, so we can work around the issue by removing that option: http://jsfiddle.net/primerano/m45h1ds5/

[primerano]

I think I need useHTML in my application because the formatting is a bit more advanced than what I put in the fiddle but I'll see if I can get it to work.

What is an OP?

[primerano]

I think I need useHTML in my application because the formatting is a bit more advanced than what I put in the fiddle but I'll see if I can get it to work.

What is an OP?

[KacperMadej]

@primerano OP - Original Poster, so in this case it would be kamilkulig. The demo is yours (judging from the firsts demo URL), so please feel to provide more info for the issue.

[KacperMadej]

@primerano OP - Original Poster, so in this case it would be kamilkulig. The demo is yours (judging from the firsts demo URL), so please feel to provide more info for the issue.

[primerano]

@KacperMadej / @TorsteinHonsi - my minimal example did not really need useHTML: true but in my application I have a tooltip that is a bit more advanced so I need useHTML as true.

For example, If I apply style to the tooltip, then useHTML true is required, Right? http://jsfiddle.net/m45h1ds5/4/

[primerano]

@KacperMadej / @TorsteinHonsi - my minimal example did not really need useHTML: true but in my application I have a tooltip that is a bit more advanced so I need useHTML as true.

For example, If I apply style to the tooltip, then useHTML true is required, Right? http://jsfiddle.net/m45h1ds5/4/

[KacperMadej]

@primerano There are some situation that require tooltip to has useHTML set to true, so the issue is an open bug issue and we will be working on resolving it.

[KacperMadej]

@primerano There are some situation that require tooltip to has useHTML set to true, so the issue is an open bug issue and we will be working on resolving it.

[primerano]

Any chance we can get this fixed in 5.0.15? We have pages that depend on the hover event working correctly.

[primerano]

Any chance we can get this fixed in 5.0.15? We have pages that depend on the hover event working correctly.

[TorsteinHonsi]

Thanks for your patience, we will have a closer look.

To rule out anything related to maps, here is issue reduced to a column chart: http://jsfiddle.net/highcharts/m45h1ds5/6/

[TorsteinHonsi]

Thanks for your patience, we will have a closer look.

To rule out anything related to maps, here is issue reduced to a column chart: http://jsfiddle.net/highcharts/m45h1ds5/6/

[TorsteinHonsi]

The problem was that IE/Edge seems to fire mouseover and mouseout events for all the elements in the SVG below whenever the div containing the HTML tooltip moved by left and right CSS properties. So I fixed it by using the transform CSS property instead. Let hope that doesn't cause other problems.

[TorsteinHonsi]

The problem was that IE/Edge seems to fire mouseover and mouseout events for all the elements in the SVG below whenever the div containing the HTML tooltip moved by left and right CSS properties. So I fixed it by using the transform CSS property instead. Let hope that doesn't cause other problems.

[primerano]

Is this fix live somewhere were I can try it out? Maybe https://github.highcharts.com/hc5-fixes/...

[primerano]

Is this fix live somewhere were I can try it out? Maybe https://github.highcharts.com/hc5-fixes/...

[KacperMadej]

@primerano The fix was pushed into the master branch, so the code with the fix is here: https://github.highcharts.com/master/highcharts.src.js

[KacperMadej]

@primerano The fix was pushed into the master branch, so the code with the fix is here: https://github.highcharts.com/master/highcharts.src.js

[primerano]

i tried this locally and it looked good. will it be in the 5.0.15 release?

[primerano]

i tried this locally and it looked good. will it be in the 5.0.15 release?

[sebastianbochan]

Currently we are developing 6.0 version which should be released within next weeks.

[sebastianbochan]

Currently we are developing 6.0 version which should be released within next weeks.

[primerano]

cool. thanks. Why so soon to 6.x? there isn't even a 5.1.x?

Is 6.x backwards compatible with 5.x ?

[primerano]

cool. thanks. Why so soon to 6.x? there isn't even a 5.1.x?

Is 6.x backwards compatible with 5.x ?

[pawelfus]

Yes, v6 is backward compatible with v5, we don't have plans to change the API.

[pawelfus]

Yes, v6 is backward compatible with v5, we don't have plans to change the API.

[primerano]

can someone confirm that this fix will be in 6.0.0? The milestone is not set on this issue and I really need this fix before we launch our visualizations later this month.

Has the date for 6.0.0 been set?

@KacperMadej @sebastianbochan

[primerano]

can someone confirm that this fix will be in 6.0.0? The milestone is not set on this issue and I really need this fix before we launch our visualizations later this month.

Has the date for 6.0.0 been set?

@KacperMadej @sebastianbochan

[pawelfus]

Yes, it is part of the master branch so unless the fix cause any regressions it will be released. 6.0.0 should be released today/tomorrow.

[pawelfus]

Yes, it is part of the master branch so unless the fix cause any regressions it will be released. 6.0.0 should be released today/tomorrow.

[TorsteinHonsi]

This fix had to be reverted in bef82b8 due to various problems. We need to find a different workaround for Edge's problem.

[TorsteinHonsi]

This fix had to be reverted in bef82b8 due to various problems. We need to find a different workaround for Edge's problem.

[alejandrogih]

Thanks for this post, I was about to get crazy trying to figure this out.

I did a simulation for the useHtml with this:
tooltip:{
enabled: true,
headerFormat: '',
style :{
color: '#000',
fontSize: '25px'
},
formatter: function() {
return ''+this.point.name+''
}
}
Hopefully it works for someone else.

[alejandrogih]

Thanks for this post, I was about to get crazy trying to figure this out.

I did a simulation for the useHtml with this:
tooltip:{
enabled: true,
headerFormat: '',
style :{
color: '#000',
fontSize: '25px'
},
formatter: function() {
return ''+this.point.name+''
}
}
Hopefully it works for someone else.

[blemaire]

Hi Everybody, just wondering if this was actively being looked at as I'm experiencing this bug too.
Thanks

[blemaire]

Hi Everybody, just wondering if this was actively being looked at as I'm experiencing this bug too.
Thanks

[KacperMadej]

Hi @blemaire

The issue is open and labelled as a bug. There's no ETA for the fix right now.

As a worka round - if you are not affected by the problematic side effects caused by the reverted fix - you could apply the reverted fix in a local version of Highcharts. bef82b8

[KacperMadej]

Hi @blemaire

The issue is open and labelled as a bug. There's no ETA for the fix right now.

As a worka round - if you are not affected by the problematic side effects caused by the reverted fix - you could apply the reverted fix in a local version of Highcharts. bef82b8