lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Select, copy and paste text in Html tooltip

Hi,

I would like to select, copy and paste text in my tooltip. It contains important information my users would like to copy into another application.

Unfortunately, I can't seem to figure out how to enable this in a Highchart graph.

Here is the config of my tooltip:

Code: Select all

animation: false,
hideDelay: 1,
shared: false,
useHTML: true,
stickOnContact: true,
backgroundColor: "rgba(246, 246, 246, 1)",
borderColor: "black",
borderRadius: 3,
borderWidth: 1,
formatter: function () { code here to render my tooltip with Html}
I've looked on Stackoverflow and a few old conversations around this topic seem to say it doesn't work. Maybe it doesn't and there's a good reason behind it. But since I'm setting useHTML, I would be in the opinion there's text being rendered in my tooltip, thus making it selectable. For example, I put a link in my tooltip and the cursor changes to a hand to indicate to the user it can click on the link.

Any advice on how to enable select, copy and paste of text in a tooltip?
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Select, copy and paste text in Html tooltip

Hi,

Thanks for contacting us with your question!

Here is the thread where this is clarified:
Highlighting text on chart and copying to clipboard

However, there is a non-obvious way of achieving the possibility to select (and copy) text in the tooltip. Here is the demo:

Demo
https://jsfiddle.net/BlackLabel/5nd3gpbL/

Let me know if that was what you were looking for,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Select, copy and paste text in Html tooltip

Hi,

Thank you for the link explaining why this isn't supported/possible by design in Highcharts.

Thank you also for submitting a workaround. I tried your sample and it does work in my browser.

But when I put it in my application, my <div> has a little for styling than yours:

Code: Select all

`<div style="width: 200px; white-space:normal;user-select:text; cursor: normal;" onmousedown="event.stopPropagation();">`;
I added my additional styling to your sample and it didn't prevent the copy/paste of text.

But in my browser console, here's what I got when I put the onmousedown="event.stopPropagation();" part in my tooltip.

Code: Select all

Highcharts warning: Invalid attribute 'onmousedown' in config (Highcharts.src.js:227)


I'm using the following Highcharts libraries in my NodeJs/Typescript/React app:

Code: Select all

        "highcharts": "^9.3.2",
        "highcharts-react-official": "^3.1.0",
Could it be possible that this workaround stopped working in a newer version of Highcharts?
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Select, copy and paste text in Html tooltip

Hi,

This is caused by improved security in Highcharts ^9.0.0.

To allow onmousedown execution, you need to override allowedReferences:

Code: Select all

Highcharts.AST.allowedAttributes.push('onmousedown')

You will find more information in this thread: https://github.com/highcharts/highcharts/issues/15031

Feel free to ask any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Re: Select, copy and paste text in Html tooltip

Thank you very much for this last specific piece of code. I would have never figured it out by myself.

It now works. I can select text in my tooltip.

Just one last quick question. As my application is a React Single Page Application, is there a specific or recommended place where I should put this line in my code?

Code: Select all

Highcharts.AST.allowedAttributes.push('onmousedown')
Should I put it in my functional component that embeds my Highcharts? If so, it will get called at each paint. I could put it somewhere where I know it will only be called once in the entire lifetime of the application but it would be far away from the code where I configure my chart with.

Any advice on this?
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Select, copy and paste text in Html tooltip

Great to hear it's worked for you!

I'm not a React.js expert so I passed this question to our React Developer to be sure. I will get back to you with an answer as soon as possible.

Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Select, copy and paste text in Html tooltip

Hello again,

If you add mentioned code above the component declaration, it should be executed only once.

Demo:
https://codesandbox.io/s/highcharts-rea ... rked-x3dxy

Let me know if you have any further questions,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer

Return to “Highcharts Usage”