How to customize the tooltip?

Dash Python
1

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

2

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

3

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

4

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

walmart
walmart745×587 2.07 MB


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
5

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