The use of specific quotation marks in the tooltip.formatter() affect parsing to the DOM element.

[magdalena-gut]

Behaviour

Using the following code in the tooltip.formatter() doesn't change the circle colour as expected.
return '<span style="color: " + this.series.color + ";"">\u25CF</span>;

Received DOM element:
<tspan style="color: #7cb5ec;">●</tspan>

Demo:
https://jsfiddle.net/BlackLabel/51ho6by0/

Workaround:

Works correctly with proper quotation marks configuration:
return '<span style="color: ' + this.series.color + ';">\u25CF</span>';

Received DOM element:
<tspan style="color: rgb(124, 181, 236); fill: rgb(124, 181, 236);">●</tspan>

Demo:
https://jsfiddle.net/BlackLabel/Lrv5p9o0/

Last working version

In the last working version (9.3.3), color property was parsed to fill independently of quotation marks.

Demo:
https://jsfiddle.net/BlackLabel/t1e84sho/

Caused by the following PR:

https://github.com/highcharts/highcharts/pull/16871/files

[magdalena-gut]

@TorsteinHonsi should we treat it as a bug?

[TorsteinHonsi]

@magdalena-gut, yes, I think it's a bug. It basically fails to parse style attributes with single quotes.

Simplified demo, and inspiration for integration test: https://jsfiddle.net/highcharts/dmb7t143/

The problem is this line:

https://github.com/highcharts/highcharts/pull/16871/files#diff-bf1c4abb15f5c305c4275368881a707d5667a2c0a45623950a87eea9b2a0e7bbR527

By taking the possibility of single quotes into consideration, it should work as expected:

.replace(/ style=(["'])/g, ' data-style=$1');

[magdalena-gut]

@TorsteinHonsi thanks for clarifying!

[raf18seb]

I was about to create a similar ticket (injection of a custom CSS attribute, demo: https://jsfiddle.net/BlackLabel/h063ndty/), but it will also be solved by this ticket here so I'm just leaving a demo