Add support for clickable hover text or a per pt onclick attribute

[etpinard]

Users can put links inside hover labels, but when user try to click the link, the hover label obviously disappears. So perhaps we could add optional “sticky” hover labels, where you click and the hover label is persistent until you click again?

Defining what sticky means will be tricky. It probably doesn't apply to every situation. Maybe we could add it as a new layout.hovermode e.g. 'hovermode: 'sticky'.

So, maybe instead we could define a linkonclick attribute e.g. linkonclick: ['https://plot.ly/~empet/101', 'https://plot.ly', /* ... one link per data pt */] that way clicking on a data pt would open the link instead of hovering on the data pt -> move mouse over link in hover label -> click on it.

cc @jackparmer

[john-soklaski]

We definitely would have use for a hover label that the user can interact with. There is quite a bit of information in our hover labels (5-6 lines of text), and users would often like to copy and paste some text from the hover label, or potentially click a link.

[jackparmer]

@john-soklaski what do you think the right interaction is for allowing a user to select copy paste what is in a hover tag?

[john-soklaski]

@jackparmer I think persisting the hover label if a user moves the mouse cursor along the arrow to the hoverlabel makes sense (with hovermode: closest)

[maresk]

@jackparmer I will second this feature request in the python API. Our clients would like to be able to interact with content related to a particular data point so ss far as interaction goes, the text should persist, and a hyperlink placed in the text should be clickable.

[latorrefabian]

+1

[dr-stringfellow]

+1

[jackparmer]

@john-soklaski , @maresk , @latorrefabian , @maierbenedikt - you may be interested in discussion here, Annotations that show & hide on clicking data: https://github.com/plotly/plotly.js/issues/1266

[alexcjohnson]

And see the implementation of clicktoshow in #1265 - at some point we do intend to implement a way to generate "sticky" annotations programmatically on clicking a data point but for now, as long as you don't have too much data you can do it the other way around: pre-generate all the annotations you might want and link them to appear on clicking the appropriate data points.

[slremy]

Hello all! Am I missing something fundamental here? Is there a purpose of being able to have hyperlinks in the text if you can't click them?

[alexcjohnson]

Am I missing something fundamental here? Is there a purpose of being able to have hyperlinks in the text if you can't click them?

We support text in a lot of different contexts, and in most of the other contexts the links are clickable. So it would require special code to disable link creation within the unclickable contexts, and that extra complexity seemed unnecessary since really, is there a purpose to adding hyperlinks that you can't click? 😉

[slremy]

That makes sense!

[PaNDanese]

what do you think the right interaction is for allowing a user to select copy paste what is in a hover tag?

@jackparmer I think clicking on the marker itself would be ideal to toggle the stickiness of the hover tag.

• Click on the marker and the hover tag persists and you can then copy/paste hover tag-text and click on hyperlinks in the hover tag
• Click on the marker again and the hover tag "unsticks".

+1 for utility

[wroscoe]

+1 for this. This would enable users to dig into the data by linking other related charts. I like the simple solution proposed by @pdanese

[slremy]

It seems as if there may already a solution in community.plot.ly

To me it seems that if you knew which datum was clicked, then you could window.open(datum.uri). It's probably not that easy.. but the fiddle is compelling.

I can't quite read tease it out of the docs what it's actually saying :(

[newuser357]

Hello, has this been completed yet? Currently working on a project where I want users to be able to click the annotations and copy them to the clipboard.

[nistrup]

I would love to have this feature as well!

[bill10]

looks like this is still open? any updates?

[rusiano]

+1

[steffon-atg]

+1

[kamikaze942]

+1 need stickiness

[jackparmer]

This is not a large project but obviously hasn't found its way to the top of the priority queue for a while. If any company would like to partner with us on this, we'd be interested in discussing! https://plot.ly/products/consulting-and-oem/

[AniWar]

(For 3D chart) I was trying out some complex keyboard bindings (which didn’t work), and accidently I found this . Just double click on markers (which selects text) , then press ctrl+C.

[josemonsalve2]

+1

[baddymaster]

+1

This would be very useful for data analysis. And unfortunately the hack suggested by @AniWar doesn't seem to work anymore.

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $15k-$20k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

[keseldude]

In case this is useful for someone else, I worked around this by adding some 'postscript' javascript as part of writing my figure to HTML. https://gist.github.com/keseldude/4c3c2220f0aec13604a1e4836995e37c

This creates a new "info panel" div, whose contents become the hover text when the user clicks on a point matching some condition (in my case, if the hover text matches some regexp). Once the text is in the "info panel", the user can select the text there.

[slremy]

Super useful

[blatchfordcc]

Any updates/solutions to this issue?

[leleogere]

This would be very useful

[lemetrec]

+1

[bmurtagh01]

+1

[bschilder]

+1

[therhaag]

Hi - stumbled upon this when looking for a way to follow a URL that's in the hover text. The workaround proposed by @keseldude looks like it could work for me, but I don't understand how to use it. Could anyone please elaborate?

[GabeNicholson]

Any update on this?

[sebastien-plutniak]

+1, I am also in need of this feature

[philipjames44]

+1

[JohnScolaro]

+1

[leijer]

+1

[jerpint]

+1

[Simply-Connected-LLC]

+1

[natearoe]

+1

[irialagoportela]

+1

[sudughonge]

+1

[bartosz-nawrotek-brainly]

+1