Disable hover event without disabling tooltip for specific trace?

Dash Python
1

Hi,

I have a graph component with box and scatter trace:

2023-01-03_13h40_44

I would like to:

  • have a tooltip when hovering over the boxes
  • have a server callback when hovering over the scatter points

It works, but for network performance reasons it would be nice if no hover event would be fired if hovering over the boxes. With setting hoverinfo to ‘skip’ for box-traces, the event is indeed fired only for the scatter points, but of course no tooltip is shown for the boxes any more.

Does anyone know the way to disable firering of hover events for specific traces but keep showing the tooltip?

Greetings

2

hi @master_of_disaster
:wave: Welcome to the community,

Maybe the dcc.Tooltip with a custom callback would give you the flexibility you need? Tooltip | Dash for Python Documentation | Plotly

3

I wonder if you might be able to solve the issue by changing 'skip' to 'none' for hoverinfo since 'skip' prevents the the click/hover events from firing but 'none' does not (see Box traces in Python)

4

Actually, I realize now that you want to have the hoverinfo appear on the plot but you don’t want to trigger the callback for the box trace but you still want to trigger it for the scatter. You can probably do this by restructuring your callback into two . First, using a clientside callback to listen to the hoverData and then have that update a dcc.Store or something to trigger the actual callback only if the scatter trace was hovered over.

4 Likes
5

I had already tried to solve this with a clientside callback. I wanted to resent the event from the clientside callback, but without success. With your suggestion to use dcc.Store I have managed it.

Javascript-Code (I use customdata to decide, if the event should be triggered)

window.dash_clientside = Object.assign( {}, window.dash_clientside, {
  clientside: {
    event_filter: function ( data ) {
      try {
        if ( data['points'][0]['customdata'] == 'md' )
          return data;
      } catch {
      }
      return window.dash_clientside.no_update;
    }
  }
} );

And python.
inter is a dcc.Store(id=‘inter’):

app.clientside_callback(
  ClientsideFunction( namespace='clientside', function_name='test_function' ),
  Output( 'inter', 'data' ),
  Input( 'graph', 'hoverData' ),
)

@app.callback(
  Output( 'output2', 'children' ),
  Input( 'inter', 'data' ),
)
def do_something( data ):
  return data

It works. Thanks.

1 Like