How to customize Plotly Tooltip

Hello,
I’m trying to implement a custom tooltip for a pie chart but there is no xaxis/yaxis properties in the ‘hover event data’. So no way to use l2p/d2p function or do I missed something? If not, I would like to know if there is another way to get an x/y coordinate where I can attach the tooltip?

Thanks in advance,
Cédric

@pppw
I know this is an old thread, but it’s been immensely helpful to me, so I wanted to add this here for anyone that didn’t glean it from Manuel’s post above. Adding the ‘pointer-events: none;’ makes the tooltip “stable” like the default one.

@Cedric I found a “hack” to get more detailed data for the hover:

            var addEventDataFn = function (chart) {
                $.each(chart._fullData, function(key, val) {
                    if (val._module.eventData) {
                        return true;
                    }
                    val._module.eventData = function eventData(out, pt, trace, cd, pointNumber) {
                        out = $.extend(out, pt);
                        return out;
                    };
                });
            };

Plotly.react(myGraphDiv).then(function () {
    addEventDataFn(myGraphDiv);
});

(Attention: It uses jQuery)

With this the data contains all the needed information to construct your own hover-effect.

Hope this code-snipped helps a lot of people out there. But beware: If the chart-type defines this function already and provides less data it can make problems, so this case is not reflected yet.

2 Likes

Is there a way to modify what’s displayed on hover for a US county choropleth (Python)? Right now it shows “value” but that’s very confusing for my graph; I want it to show “population” instead. Also, I’ve had some criticism that absolutely no one knows what FIPS are, so I would like to change that to “county code”. At the very least, it would be nice if I could disable the FIPS from showing on hover, but keep the other stuff in the hover box. As far as I can tell, I can only switch the hover from True to False, but then there’s no info.

Thanks!

1 Like

Not sure if this works for county maps, but adding hoverinfo='location+text' to my state choropleth map’s data dictionary worked perfectly for me. The info you want displayed on mouseover should go in your df['text'] column, with each line separated by <br>.

This is what your text column should look like:
‘Inspection Fees: 4<br>Settlement Services: 10<br>Title Insurance: 9<br>Total: 23’

image

hoverinfo (flaglist string)
Any combination of "location", "z", "text", "name" joined with a "+" OR "all" or "none" or "skip".
examples: "location", "z", "location+z", "location+z+text", "all"
default: "all"
Determines which trace information appear on hover. If none or skip are set, no information is displayed upon hovering. But, if none is set, click and hover events are still fired.