Black Lives Matter. Please consider donating to Black Girls Code today.

How to customize the tooltip?

Hi,
I need to change the information in the tooltip, the hoverinfo is very limited. What I´ll like to achieve is to call some function using the ‘x’ and ‘y’ from the hoverData and show it in the hover tooltip. Is there any way I can overwrite the hover behavior so I can show more than just “x”, “y”, “z”, “text” or “name”.

I have tried to use annotations instead of the tooltip and placing the annotation and the text that I need every time hoverData is triggered. But, this solution is very slow as I need to pass the figure every time.
Any ideas?
Thanks

You’ll need to prefill the text property with the hover info that you want.

That is exactly the problem. The ‘text’ property depends on the ‘x’ and ‘y’ value, so I need to precalculate this ‘text’ and then load it into the plot. This is no efficient at all as I have more than 30 traces with more than 65000 points each.
It would be great to call a function inside the hover tooltip that reads as argument the hovered ‘x’ and ‘y’ and returns this ‘text’ property.

Thanks

I see. The best way to do this would be to display the text outside of the plot. Here is an example:


import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd

app = dash.Dash()

df = pd.read_csv(
    'https://raw.githubusercontent.com/'
    'plotly/datasets/master/'
    '1962_2006_walmart_store_openings.csv')

app.layout = html.Div([
    html.H1('Walmart Store Openings'),
    html.Div(id='text-content'),
    dcc.Graph(id='map', figure={
        'data': [{
            'lat': df['LAT'],
            'lon': df['LON'],
            'marker': {
                'color': df['YEAR'],
                'size': 8,
                'opacity': 0.6
            },
            'customdata': df['storenum'],
            'type': 'scattermapbox'
        }],
        'layout': {
            'mapbox': {
                'accesstoken': 'pk.eyJ1IjoiY2hyaWRkeXAiLCJhIjoiY2ozcGI1MTZ3MDBpcTJ3cXR4b3owdDQwaCJ9.8jpMunbKjdq1anXwU5gxIw'
            },
            'hovermode': 'closest',
            'margin': {'l': 0, 'r': 0, 'b': 0, 't': 0}
        }
    })
])

@app.callback(
    dash.dependencies.Output('text-content', 'children'),
    [dash.dependencies.Input('map', 'hoverData')])
def update_text(hoverData):
    s = df[df['storenum'] == hoverData['points'][0]['customdata']]
    return html.H3(
        'The {}, {} {} opened in {}'.format(
            s.iloc[0]['STRCITY'],
            s.iloc[0]['STRSTATE'],
            s.iloc[0]['type_store'],
            s.iloc[0]['YEAR']
        )
    )

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

if __name__ == '__main__':
    app.run_server(debug=True)

1 Like

Is the text object the hoverinfo as well as the text that appears on the graph? I would like to make these seperate, where the hoverinfo has more information than what appears on the graph.

1 Like