Lost hover tips ability when moving scatter plot to top of page

Dash Python
1

I had hover tips working when the scatterplot was at the bottom of the page, but when I moved it to the top, suddenly Dash calls the hovertips callback with “None” for whatever point the mouse is over. Click on point still returns click data properly. How do I get the hover capability back?

Also, a secondary problem (or is it the source of the problem?) When the scatterplot is at the top of the page, it overdraws the image underneath it, requiring a sacrificial image to soak up the space.

Dash version 2.7.0

Code:

Layout:

html.Div([
    html.Div([dcc.Graph(id='wafermap', clear_on_unhover=True), dcc.Tooltip(id='wafermap-tooltip', direction='bottom')],
             style={'height': defaultimagewidth * 1, 'width': defaultimagewidth * 1.5}),             
    html.Div([html.Img(id='sacrificial_spacer', src='./assets/blank.png', width=defaultimagewidth / 2, height=defaultimagewidth / 2)]),
    html.Div([    
        html.Label('', id='imshowlabel1',
               style={'fontFamily': 'calibri', 'display': 'inline-block',
                      'textAlign': 'left'})
    ]),
    html.Div([html.Img(id='click-img', width=defaultimagewidth, height=defaultimagewidth)], style={'display': 'inline-block'}),
    html.Div([    
        html.Label('', id='imshowlabel2',
               style={'fontFamily': 'calibri', 'display': 'inline-block',
                      'textAlign': 'left'})
    ]),
    html.Div([html.Img(id='click-img2', width=defaultimagewidth, height=defaultimagewidth)], style={'display': 'inline-block'}),
    html.Div([    
        html.Label('', id='imshowlabel3',
               style={'fontFamily': 'calibri', 'display': 'inline-block',
                      'textAlign': 'left'})
    ]),
    html.Div([html.Img(id='click-img3', width=defaultimagewidth, height=defaultimagewidth)], style={'display': 'inline-block'}),
    html.Div([    
        html.Label('', id='imshowlabel4',
               style={'fontFamily': 'calibri', 'display': 'inline-block',
                      'textAlign': 'left'})
    ]),
    html.Div([html.Img(id='click-img4', width=defaultimagewidth, height=defaultimagewidth)], style={'display': 'inline-block'}),
    html.Div([html.Button('Back', id='backbutton', style={"margin-right": "12px", "font-size": "14px"}),
              html.Label('Four-Image Page Number:',
                     style={'fontFamily': 'calibri', 'margin-right': '3em',
                            'textAlign': 'left'}),
              html.Label('', id='fourimpage',
                     style={'fontFamily': 'calibri',
                            'textAlign': 'left'}),
              html.Button('Forward', id='fwdbutton', style={"margin-left": "12px", "font-size": "14px", "margin-bottom": "12px", "margin-top": "12px"}),              
              ], id='buttons', style={'whiteSpace': 'pre-wrap'})
    ], id='click-over', style={'whiteSpace': 'pre-wrap', 'display': 'inline-block'}),

callback setup (this needs to know what row in the table is selected, hence the table stuff):

@app.callback([
    dash.dependencies.Output("wafermap-tooltip", "show"),
    dash.dependencies.Output("wafermap-tooltip", "bbox"),
    dash.dependencies.Output("wafermap-tooltip", "children"),
    dash.dependencies.Output('hoverpoint', 'data')
    ],
    [dash.dependencies.Input("wafermap", "hoverData"),
     dash.dependencies.Input("wafermap", "clickData")],
    [dash.dependencies.State("hoverpoint", "data"),
     dash.dependencies.State('datatab', 'data'),
     dash.dependencies.State('thepagetoget', 'data')]
)
def display_hover(hoverData, clickData, hoverpoint, table_data, thepagetoget):

the figure in question:

    fig = px.scatter(
        figgframe, x='X', y='Y', hover_data='q')
    fig.update_traces(hoverinfo='none', hovertemplate=None)
    fig.update_layout(
        updatemenus=[
            dict(
                type='buttons',
                buttons=list([]),
                showactive=False,
                y=0,
                yanchor='bottom'
                )
        ]
    )

thanks, – Ben

2

I am not sure I understand you: You want to see the hoverinfo but you deactivate it?

3

It’s all spelled out here AND it worked fine when the scatter was at the bottom of the page. Basically a Hover Tip is independent of that window so you don’t want both

If I comment out that line then I get two windows on click, a hover window and a hovertip window, but still get zero windows on hover.

4

OK, I got confused between Tooltip and hoverinfo, my bad