Images in hover tags

[jackparmer]

I have links to the PNG and SVG molecular structure diagrams for each of the points in this 3d scatter plot (each point represents a molecule):

It would be awesome if images could be configured to show up in hover text.

2 screenshots of this feature in Spotfire for illustration:

[johnpvaillancourt]

I have the same requirement in a Plotly 3D scatterplot I'm working on in R, using plotly/htmlwidgets. Ideally, I'd like to be able to have an image attached directly to the hover box, for quick preview before opening a larger, external version for more in-depth inspection. Currently, I have images opening in separate windows by "plotly_click" on individual data points.

[chriddyp]

Community question about this here: #1323

[jackparmer]

Community question (R): #9223

If any companies are able to fund this feature, please reach out.

[emmanuelle]

Community question in https://community.plotly.com/t/how-to-create-customised-hovers-in-plotly/36815

[emmanuelle]

Mentioned in the forum https://community.plotly.com/t/graph-hover-feature/40421/2.

[jackparmer]

For visitors who are discovering this issue for the particular use case of displaying a molecular structure on hover, they may find these Dash molecule renderers useful in the meantime:

2d - https://dash.plotly.com/dash-bio/molecule2dviewer
3d - https://dash.plotly.com/dash-bio/molecule3dviewer
3d with ambient occlusion - https://dash.plotly.com/dash-bio/speck
3d based on NGL - plotly/dash-bio#496

[drscotthawley]

Four years and still open. :'-( I love the text annotation hover, & figured there's GOTTA be image annotation hover in a slick pro package like Plotly! ;-) Sadly I don't have molecular diagrams, just regular images.
Will keep a watch on @rreusser 's fork!

EDIT: Looks like Bokeh can do something along these lines -- even in Colab when used in concert with the nice package for Colab called kora. However the images must be hosted elsewhere -- bit of a wrinkle, that. For those interested, here is a demo notebook I made.

[zadamg]

Someday I will be able to put an image or picture into a plotly chart's hoverover.

It will be a great day. Today though, I am sad to see no progress thus far :*(.

[daviguima]

BUMP! That would be a great addition to my time-series analysis. Currently it is a pain to have several plots in parallel to inspect what is happening inside my simple px.line plot. But I know this is probably no trivial task at all, if it was, it would certainly be fixed already. Regardless of that, thanks for the great work you guys are doing behind the scenes in plotly (-:

[raphaeljolivet]

Hi, I needed the same, so I wrote a simple function to do it and posted in to this gist:
https://gist.github.com/raphaeljolivet/f076256e589f67c028a6bffaab279601

Example usage (assuming your images are stored locally) :

plot = xp.scatter(df, "nb_x", "nb_y")
template="<img src='./img/{id}.png'>"
interactive_plot(df, plot, template)

Output :