# Disable hover on Mobile / Tablet Devices

**URL:** <https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150>\
**Category:** Dash Python\
**Created:** [October 2, 2018, 5:26pm UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150 "2018-10-02T17:26:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![dmedina](https://avatars.discourse-cdn.com/v4/letter/d/b3f665/32.png) [@dmedina](https://community.plotly.com/u/dmedina)\
**Post date:** [October 2, 2018, 5:26pm UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150/1 "2018-10-02T17:26:10Z")

</div>

Hi,

Is there any way to disable the hover in the graphs on mobiles and tablets devices?

Thanks!

---

<div class="post-metadata">

**Author:** ![jmmease](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jmmease/32/3706_2.png) [@jmmease](https://community.plotly.com/u/jmmease)\
**Post date:** [October 3, 2018, 10:28am UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150/2 "2018-10-03T10:28:08Z")

</div>

Hi @dmedina,

If you’re using `plotly.offline.plot` you can use the `staticPlot` config option to disable all interactivity. E.g.

```python
from plotly.offline import plot

plot({'data': [{'y': [2, 1, 3]}]},
     config={'staticPlot': True})

```

Hope that helps,  
-Jon

---

<div class="post-metadata">

**Author:** ![dmedina](https://avatars.discourse-cdn.com/v4/letter/d/b3f665/32.png) [@dmedina](https://community.plotly.com/u/dmedina)\
**Post date:** [October 3, 2018, 1:52pm UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150/3 "2018-10-03T13:52:16Z")

</div>

Thanks @jmmease! That works!

But, does anyone knows how to do it in Dash?

Thanks!

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [October 3, 2018, 2:04pm UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150/4 "2018-10-03T14:04:18Z")

</div>

Just add config as the 3rd dictionary argument to your figure. So it would be data, layout, config.

```
    dcc.Graph(
        ....
        config={'staticPlot': True}
    )
```

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [October 3, 2018, 2:17pm UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150/5 "2018-10-03T14:17:49Z")

</div>

Here’s a [dash recipe](https://github.com/plotly/dash-recipes/blob/master/dash-modebar.py) you can reference as well with a whole bunch more useful options:

---

<div class="post-metadata">

**Author:** ![dmedina](https://avatars.discourse-cdn.com/v4/letter/d/b3f665/32.png) [@dmedina](https://community.plotly.com/u/dmedina)\
**Post date:** [October 3, 2018, 3:06pm UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150/6 "2018-10-03T15:06:52Z")

</div>

Thank @mbkupfer! That disables the hover of the graphs in all devices. But the problem is when I use a computer, because the hover is also disabled.

The details of my problem are: I want to disable the hover property in touchable devices because the graphs are adjusted to the whole screen, and when you want to scroll and you touch over a graph, the scrolling does not work because of the hover property of the graphs. So, I do not know how to fix it. Maybe I can fix it with Dash or I can fix it with CSS or I can not fix it.

Thanks!

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [October 3, 2018, 5:05pm UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150/7 "2018-10-03T17:05:18Z")

</div>

_Theoretically_, this should be possible. I’m thinking of one solution which would be a combination of javascript and dash-callbacks:

**1. Javascript**

Using `window.matchMedia`, you can create [query notifications](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries#Receiving_query_notifications) for different media changes.

In not so eloquent javascript, this would equate to something like:

```auto
var container = document.querySelector('#container')
var mediaQueryList = window.matchMedia("(max-width: 400px)")

function handleOrientationChange(mql) {
  container.className = 'small-screen'
 //changing the classname should theoretically trigger a callback, but I couldn't get it to trigger
}
mediaQueryList.addListener(handleOrientationChange);

```

**2. Dash**

If the above ends up working, then we can trigger a callback whenever the class is changed as such:

```python
# component declaration in app.layout
dcc.Graph(
        id='my-graph',
        figure={...},
        config={'staticPlot': True}
    )

# callback
@app.callback(Output('my-graph', 'config'),
    [Input('container', 'className')])
def change_plot_config(cls):
    return {'config': {'staticPlot': False}}

```

There are just two issues that I’m running into here.

**Issues**

- First issue is that the the `className` change does not trigger any callback. I know this because even when I manually changed the classname in the console, nothing got triggered.

- Second issue is that the `config` attribute of the `dcc.Graph` will not update. Even when I force the callback to be triggered.

@chriddyp and @nedned you are the dash experts. Do you have any ideas as to what’s going on here?

---

<div class="post-metadata">

**Author:** ![dmedina](https://avatars.discourse-cdn.com/v4/letter/d/b3f665/32.png) [@dmedina](https://community.plotly.com/u/dmedina)\
**Post date:** [October 4, 2018, 1:12pm UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150/8 "2018-10-04T13:12:23Z")

</div>

Thanks a lot @mbkupfer! It was helpful.

Finally I did a “tricky” solution just using CSS. I am sure it is not the best way but at least it works.

I found out that the html elements with hover properties has the name: `.cursor-pointer`, so I added CSS property `pointer-events: none !important;` to that class when it is a touchable device. At the moment I do not realize any problem using that, if I find any I will notify it.

Thanks!!!

---

<div class="post-metadata">

**Author:** ![mbkupfer](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/mbkupfer/32/4334_2.png) [@mbkupfer](https://community.plotly.com/u/mbkupfer)\
**Post date:** [October 4, 2018, 2:22pm UTC](https://community.plotly.com/t/disable-hover-on-mobile-tablet-devices/14150/9 "2018-10-04T14:22:50Z")

</div>

Ooh, very clever! 👏