# Graph hover info lingers when using Dash app on mobile after the graph has been changed

**URL:** <https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405>\
**Category:** Dash Python\
**Created:** [October 17, 2023, 8:14pm UTC](https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405 "2023-10-17T20:14:26Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![vrg](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@vrg](https://community.plotly.com/u/vrg)\
**Post date:** [October 17, 2023, 8:14pm UTC](https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405/1 "2023-10-17T20:14:26Z")

</div>

Simple Dash app with a dropdown menu and an a graph. The graph changes with the dropdown selection. The graph shows hover data as usual and works perfectly on a computer.

When used on mobile / tablet the hover info shows up when a data point is clicked. The hover info lingers until you click somewhere else, even if the graph is change using the dropdown.

Can someone help with a solution for this?

Thank you!

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [October 17, 2023, 8:17pm UTC](https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405/2 "2023-10-17T20:17:33Z")

</div>

Hello @vrg,

Welcome to the community!

I’d try having your `hoverData` clear upon changing the chart’s `figure`. This should help you in this case.

---

<div class="post-metadata">

**Author:** ![vrg](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@vrg](https://community.plotly.com/u/vrg)\
**Post date:** [October 17, 2023, 8:49pm UTC](https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405/3 "2023-10-17T20:49:04Z")

</div>

hello! thanks for the response. I’ve tried something like this but it does not seem to do the trick:

@app.callback(  
Output(‘bar-chart’, ‘figure’),  
Output(‘bar-chart’,‘hoverData’),  
Input(‘my\_dropdown’, ‘value’))

def update\_chart(selected\_option):  
if selected\_option == ‘opt1’:  
figure = x  
elif selected\_option == ‘opt2’:  
figure = y  
return figure, None

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [October 17, 2023, 8:51pm UTC](https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405/4 "2023-10-17T20:51:26Z")

</div>

Try returning an empty dict `{}` instead of `None`

---

<div class="post-metadata">

**Author:** ![vrg](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@vrg](https://community.plotly.com/u/vrg)\
**Post date:** [October 17, 2023, 9:22pm UTC](https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405/5 "2023-10-17T21:22:59Z")

</div>

thanks for the feedback. Just tried this, doesn’t seem to be it!

---

<div class="post-metadata">

**Author:** ![vrg](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@vrg](https://community.plotly.com/u/vrg)\
**Post date:** [November 6, 2023, 6:59pm UTC](https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405/7 "2023-11-06T18:59:15Z")

</div>

Here is a minimal working example. On touch interface, the hover info is sticky when the dropdown value and source graph are changed. I’ve tried using various parameters like `clear_on_unhover`, `hoverData`, `hoverinfo`, `selectedpoints`. Looks like the interaction gets captured as a click on touch so I tried to work with properties like `clickData`. Ideally, looking for the label to disappear when the dropdown is changed so it isn’t referencing the incorrect data point on the graph. thanks guys!

```auto
# Import modules
import plotly.graph_objs as go
import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output

# App layout 
app = dash.Dash( __name__ )
app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Graph 1', 'value': 1},
            {'label': 'Graph 2', 'value': 2}
        ],
        value=1
    ),
    dcc.Store(id='click-data-store'),
    dcc.Graph(id='graph')
])
  
# Dropdown graph callback
@app.callback(
  Output('graph', 'figure'),
  [Input('dropdown', 'value')]
)
def update_graph(selected_value):
  figure = go.Figure()

  if selected_value == 1:
      figure.add_trace(go.Bar(x=['ABCT','DEFR','GHIP'], y=[4, 5, 6], name='Graph 1'))
  elif selected_value == 2:
      figure.add_trace(go.Bar(x=['JKWW','STVP','CXYZ'], y=[3, 10, 4], name='Graph 2'))
  
  return figure

# Run app
if __name__ == ' __main__':
    app.run_server(debug=False, host="0.0.0.0", port=1005)

```

---

<div class="post-metadata">

**Author:** ![vrg](https://avatars.discourse-cdn.com/v4/letter/v/4da419/32.png) [@vrg](https://community.plotly.com/u/vrg)\
**Post date:** [November 6, 2023, 7:07pm UTC](https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405/8 "2023-11-06T19:07:59Z")

</div>

Lots of sample apps and documentation examples seem to work the same way. This [sample app](https://dash.gallery/dash-nlp/?_gl=1*vpntfn*_ga*NzAzNjQ4NDAwLjE2OTA0Mzc3NDY.*_ga_6G7EE0JNSC*MTY5OTI5NTEwMy44Ny4xLjE2OTkyOTcyNDEuNDkuMC4w) on the dash gallery seems to work around the issue if you check out the first two graphs and change the dropdowns.

---

<div class="post-metadata">

**Author:** ![NiBk](https://avatars.discourse-cdn.com/v4/letter/n/ad7895/32.png) [@NiBk](https://community.plotly.com/u/NiBk)\
**Post date:** [April 26, 2025, 10:41pm UTC](https://community.plotly.com/t/graph-hover-info-lingers-when-using-dash-app-on-mobile-after-the-graph-has-been-changed/79405/9 "2025-04-26T22:41:06Z")

</div>

Hey, I know this post is pretty old, but I was having the same issue and saw this post, as well as a bug report on github. After some playing around, I found that if I returned the entire dcc.graph component in my callback and gave the component a unique id (which I did with python’s time module), whenever I called the function and updated the graph, the popup would no longer be sticky on my phone.

```auto
import time

layout = html.div(id="graphdiv")

@app.callback(
    Output("graphdiv", "children"),
    Input("dropdown", "value")
)
def updateGraph(selected):

      ...

      return dcc.Graph(id=str(time.time()), figure=generatedGraph)

```

This exact way wouldn’t work if you needed to use the graph in an input, but you may be able to use pattern matching callbacks and change the id to be a dictionary with a standard type and varying id to make the graph a usable input. (This link explains this better: [https://dash.plotly.com/pattern-matching-callbacks](https://dash.plotly.com/pattern-matching-callbacks))