# Graph hover feature

**URL:** <https://community.plotly.com/t/graph-hover-feature/40421>\
**Category:** Dash Python\
**Created:** [June 2, 2020, 1:33am UTC](https://community.plotly.com/t/graph-hover-feature/40421 "2020-06-02T01:33:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![encyclopediabrown](https://avatars.discourse-cdn.com/v4/letter/e/c67d28/32.png) [@encyclopediabrown](https://community.plotly.com/u/encyclopediabrown)\
**Post date:** [June 2, 2020, 1:33am UTC](https://community.plotly.com/t/graph-hover-feature/40421/1 "2020-06-02T01:33:22Z")

</div>

Hello Plotly community,

I have a dash app using map using mapbox. My app is similar to the app on the dash gallery ([Oil & Gas Wells](https://dash-gallery.plotly.host/dash-oil-and-gas/)) where you have a hover text box when you have a mouse hover over a well on the map and a graph in another component dynamically updates.

I was wondering if there is a way for example, to hover over the well but instead of a hover textbox, have a hover graph pop up right where the mouse is. This way i can remove the graph component in my app and create more room for my map and lose no analytic insight since I still have my graph when i hover over the point of interest.

Please let me know how I could go about doing this with the dash library.

Thanks

---

<div class="post-metadata">

**Author:** ![Emmanuelle](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emmanuelle/32/7853_2.png) [@Emmanuelle](https://community.plotly.com/u/Emmanuelle)\
**Post date:** [June 4, 2020, 6:45am UTC](https://community.plotly.com/t/graph-hover-feature/40421/2 "2020-06-04T06:45:59Z")

</div>

Hi @encyclopediabrown welcome to the forum! It’s not possible to do this at the moment, but

- if you’re happy with a static image instead of an interactive graph in the forum, we have [an open issue in plotly.js to allow images in hover tags](https://github.com/plotly/plotly.js/issues/1323). This is a big feature so it would probably require sponsoring.
- you could also put the graph in a modal window which would appear on hover (although this might be a bit intrusive) or on click. See for example the [dash-web-trader app](https://dash-gallery.plotly.host/dash-web-trader/) and [its source code](https://github.com/plotly/dash-sample-apps/blob/master/apps/dash-web-trader/app.py): when you click on one of the stocks and hit the “buy/sell” button you have a modal graph which appears. The appearance of the modal window is [set by css](https://github.com/plotly/dash-sample-apps/blob/master/apps/dash-web-trader/assets/style.css#L699).

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [June 4, 2020, 9:13am UTC](https://community.plotly.com/t/graph-hover-feature/40421/3 "2020-06-04T09:13:16Z")

</div>

You can do it in Dash Leaflet. Here is a small example,

```auto
import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_leaflet as dl
import plotly.express as px

# Example graph.
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")
graph = dcc.Graph(figure=fig, style={"width": "400px", "height": "250px"})
# Create map with marker.
app = dash.Dash()
app.layout = html.Div([
    dl.Map([dl.TileLayer(), dl.CircleMarker(center=(56, 10), children=dl.Tooltip(graph))],
           id="map", style={'width': '100%', 'height': '100vh', 'margin': "auto", "display": "block"}),
])

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

```

---

<div class="post-metadata">

**Author:** ![encyclopediabrown](https://avatars.discourse-cdn.com/v4/letter/e/c67d28/32.png) [@encyclopediabrown](https://community.plotly.com/u/encyclopediabrown)\
**Post date:** [June 4, 2020, 9:45pm UTC](https://community.plotly.com/t/graph-hover-feature/40421/4 "2020-06-04T21:45:11Z")

</div>

Thanks @Emil, I needed this for mapbox though.

---

<div class="post-metadata">

**Author:** ![encyclopediabrown](https://avatars.discourse-cdn.com/v4/letter/e/c67d28/32.png) [@encyclopediabrown](https://community.plotly.com/u/encyclopediabrown)\
**Post date:** [June 4, 2020, 9:46pm UTC](https://community.plotly.com/t/graph-hover-feature/40421/5 "2020-06-04T21:46:10Z")

</div>

I figured Dash doesnt have this functionality. I was asked to see if I can do it in dash. Its ok.  
Thanks

---

<div class="post-metadata">

**Author:** ![encyclopediabrown](https://avatars.discourse-cdn.com/v4/letter/e/c67d28/32.png) [@encyclopediabrown](https://community.plotly.com/u/encyclopediabrown)\
**Post date:** [June 9, 2020, 6:56pm UTC](https://community.plotly.com/t/graph-hover-feature/40421/6 "2020-06-09T18:56:04Z")

</div>

Hello @Emmanuelle, if I were to go this route, How do I set a modal for the 300 locations on the map?

Thanks