New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kamilkulig opened this Issue Jul 13, 2017 · 21 comments

Comments

Projects
None yet
8 participants
@kamilkulig
Contributor

kamilkulig commented Jul 13, 2017

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

@kamilkulig kamilkulig changed the title from Point's background color doesn't persist after mouse hover (IE only) to Point's background color doesn't persist during mouse hover event (IE only) Jul 13, 2017

@KacperMadej KacperMadej added the Bug label Jul 14, 2017

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jul 18, 2017

Collaborator

It comes from tooltip.useHTML.

Minimal demo:

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

Collaborator

TorsteinHonsi commented Jul 18, 2017

It comes from tooltip.useHTML.

Minimal demo:

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

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Jul 18, 2017

Collaborator

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/

Collaborator

TorsteinHonsi commented Jul 18, 2017

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

This comment has been minimized.

Show comment
Hide comment
@primerano

primerano Jul 18, 2017

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 commented Jul 18, 2017

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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jul 19, 2017

Contributor

@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.

Contributor

KacperMadej commented Jul 19, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@primerano

primerano Jul 25, 2017

@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 commented Jul 25, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jul 25, 2017

Contributor

@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.

Contributor

KacperMadej commented Jul 25, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@primerano

primerano Sep 1, 2017

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

primerano commented Sep 1, 2017

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

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Sep 4, 2017

Collaborator

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/

Collaborator

TorsteinHonsi commented Sep 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Sep 4, 2017

Collaborator

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.

Collaborator

TorsteinHonsi commented Sep 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@primerano

primerano Sep 5, 2017

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

primerano commented Sep 5, 2017

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

@KacperMadej

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Sep 6, 2017

Contributor

@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

Contributor

KacperMadej commented Sep 6, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@primerano

primerano Sep 14, 2017

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

primerano commented Sep 14, 2017

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

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Sep 15, 2017

Contributor

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

Contributor

sebastianbochan commented Sep 15, 2017

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

@primerano

This comment has been minimized.

Show comment
Hide comment
@primerano

primerano Sep 15, 2017

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 commented Sep 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Sep 20, 2017

Contributor

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

Contributor

pawelfus commented Sep 20, 2017

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

@primerano

This comment has been minimized.

Show comment
Hide comment
@primerano

primerano Oct 2, 2017

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 commented Oct 2, 2017

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

This comment has been minimized.

Show comment
Hide comment
@pawelfus

pawelfus Oct 3, 2017

Contributor

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.

Contributor

pawelfus commented Oct 3, 2017

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 comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Dec 18, 2017

Collaborator

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

Collaborator

TorsteinHonsi commented Dec 18, 2017

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

@alejandrogih

This comment has been minimized.

Show comment
Hide comment
@alejandrogih

alejandrogih Mar 7, 2018

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 commented Mar 7, 2018

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

This comment has been minimized.

Show comment
Hide comment
@blemaire

blemaire Jul 2, 2018

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

blemaire commented Jul 2, 2018

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

@KacperMadej

This comment has been minimized.

Show comment
Hide comment
@KacperMadej

KacperMadej Jul 2, 2018

Contributor

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

Contributor

KacperMadej commented Jul 2, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment