Skip to content

HTML entities in hover text #733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harrelfe opened this issue Sep 27, 2016 · 10 comments
Open

HTML entities in hover text #733

harrelfe opened this issue Sep 27, 2016 · 10 comments

Comments

@harrelfe
Copy link

harrelfe commented Sep 27, 2016

I am glad to see plotly 4.5.2 on CRAN, which I've installed. I am re-writing several functions to use the new argument structure - so far so good on that. I have a potential major problem though. I routinely put HTML markup inside hover text, including <span> <br> etc. and so far the hover text is showing the markup and not the formatted output as it did before the new version. Any help greatly appreciated.

@cpsievert
Copy link
Collaborator

cpsievert commented Sep 27, 2016

Thanks for writing in Frank! So cool to know you're using plotly :)

I don't think the update should have broke HTML markup in hover text. Do you have an example?

These works as expected for me:

plot_ly(mtcars, x = ~wt, y = ~mpg, text = ~paste0(cyl, "<br>", disp))
plot_ly(mtcars, x = ~wt, y = ~mpg, text = ~paste0('<span style="color:black">', cyl, '</span>'))

@harrelfe
Copy link
Author

Thanks for the quick reply. Those worked for me. This one did not:

x <- 1:5
y <- (1:5)^2
z <- c(rep('', 4),
       'this is <span style="font-size: 82%;"><sup>313</sup>&frasl;<sub>1024</sub></span> that')

plot_ly(x=~x, y=~y, hoverinfo='text', text=~z)

@cpsievert
Copy link
Collaborator

cpsievert commented Sep 27, 2016

Ah, it looks like the &frasl; HTML entity is the issue here....plotly.js recently removed generalized HTML entity decoding, as apparently decoding those in <svg> can lead to XSS vulnerabilites.

For now, you'll have to use a literal /, but hopefully I can convince the plotly.js folks to add this to our official list of supported entities -- https://github.com/plotly/plotly.js/blob/master/src/constants/string_mappings.js

@harrelfe
Copy link
Author

Thanks for figuring this out. Would hex character codes also fail? I use many more characters than listed in the table you linked to so I really hope this can be addressed. I would also like to include HTML

...
in hover strings.

Also is there detailed documentation for add_lines, add_markers, add_polygons, etc?

Thanks

@cpsievert
Copy link
Collaborator

cpsievert commented Sep 27, 2016

I think we fully support unicode, so you could use unicode in the meantime.

This is still in progress, but it will be the official reference for the add_*() functions -- https://cpsievert.github.io/plotly_book/the-plotly-cookbook.html

@harrelfe
Copy link
Author

harrelfe commented Sep 28, 2016

Thanks. I tried the following, which attempts to render, but it does not render correctly:

x <- 1:5
y <- (1:5)^2
z <- c(rep('', 4),
       'this is <span style="font-size: 82%;"><sup>313</sup>&#2044;<sub>1024</sub></span> that')
# frasl=hex 2044
plot_ly(x=~x, y=~y, hoverinfo='text', text=~z)

By the way I really like the change to using the R formula language for specifying variables to plotly, plus all the new add_ functions.

@timelyportfolio
Copy link
Collaborator

timelyportfolio commented Sep 28, 2016

I could easily be way off on this, but If I copy the actual character into the string, it seems to work as expected.

library(plotly)

x <- 1:5
y <- (1:5)^2
z <- c(rep('', 4),
       'this is <span style="font-size: 82%;"><sup>313</sup>⁄<sub>1024</sub></span> that')
# frasl=hex 2044
plot_ly(x=~x, y=~y, hoverinfo='text', text=~z)

image

To get this to work in htmltools without plotly or htmlwidgets, we can use the HTML() function, but note if we wrap the unicode with HTML, it does not work.

library(htmltools)
browsable(tags$div(HTML('&#x2044;')))

@harrelfe
Copy link
Author

Yes the ordinary literal slash works but I was trying to get the factional slash to work. Also trying this because there are several other HTML characters I want to use in hover text. I did verify that the hex code for ≤ works (<= symbol).

@timelyportfolio
Copy link
Collaborator

hard to tell but the slash in my example is the fractional slash and not the literal slash.

@cpsievert cpsievert changed the title HTML markup in hover text HTML entities in hover text Sep 29, 2016
@LuShuYangMing
Copy link

How to add table on hover like this picture
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants