Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Can you add html to plot hovertext?

I’ve been trying to add html to the tooltips (either on hover or on click), but have been having trouble figuring out whether or not this is possible. It looks like some HTML statements work (like br), whereas others (like div and img) do not. Is something like this possible?

Thank you

plotly.js text only support subset of HTML in its text elements.

More info here: https://plot.ly/javascript/reference/#layout-annotations-text

Source code here: https://github.com/plotly/plotly.js/blob/master/src/lib/svg_text_utils.js#L214-L221

1 Like

Somewhat related question.

Is it possible to use a callback function to generate html “on the fly” for the text element of the hovered data item? So we don’t need to generate all the text elements in advance.

1 Like

Not at the moment, unfortunately.

Actually, is possible with a hack:
var text = [];
for(var i = 0; i < npoints; i++) {
var obj = {i:i};
obj.toString = function () {
// return string based on this.i
return generateTipText(this.i);
}
text.push(obj);
}