Created
March 23, 2021 00:14
-
-
Save keseldude/4c3c2220f0aec13604a1e4836995e37c to your computer and use it in GitHub Desktop.
Some javascript to make my plotly hover text selectable for copy/paste.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Copyright 2021 Google LLC. | |
SPDX-License-Identifier: Apache-2.0 | |
*/ | |
let plotly_div = document.getElementById('{plot_id}'); | |
let info_panel_div = document.createElement('div'); | |
info_panel_div.innerHTML = 'Click on a chart to move the hover text here, where you can then select and copy/paste.'; | |
info_panel_div.id = "info-panel"; | |
let style = document.createElement('style'); | |
style.innerHTML = ` | |
#info-panel { | |
width: 500px; | |
z-index: 1; | |
position: fixed; | |
bottom: 0; | |
right: 0; | |
overflow-x: hidden; | |
background-color: rgba(230, 230, 230, 0.8); | |
padding: 1em; | |
} | |
#{plot_id} { | |
margin-bottom: 200px; | |
} | |
`; | |
plotly_div.appendChild(style); | |
plotly_div.appendChild(info_panel_div); | |
plotly_div.on('plotly_click', function(data) { | |
for (let i = 0; i < data.points.length; ++i) { | |
let text = data.points[i].data.text; | |
if (text && text.match(/tag_in_my_hover_text/)) { | |
info_panel_div.innerHTML = text; | |
return; | |
} | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @keseldude - this looks like it could solve my problem of having a URL in the hover text and not being able to click it. Unfortunately I don't understand where to put this snippet. Can you please provide some help?