Arbitrary on-hover callbacks

I know there are hovertext options for some objects such as Graph, but are there generic hover attributes (i.e. the attribute is True when the mouse is over the component, and False otherwise). Something like this:

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

app.layout = html.Div([
    html.Button('Submit', id='my-button', n_clicks=0),
    html.Div(id='is-hover-output', children='Not hovered...')
])


@app.callback(
    Output('is-hover-output', 'children'),
    Input('my-button', 'hover'),
)
def is_hovering(hover):
    if hover:
        return 'You are hovering over the button!'
    else:
        return 'Not hovered...'


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

For example, I know DashLeaflet has some hover attributes for parts of their maps which you can hook onto with callbacks. However, they have defined custom components in javascript. Is there a simple way to implement with just regular dash core components?

1 Like

Yes this is now possible in Dash 2.0! See dcc.Tooltip: Tooltip | Dash for Python Documentation | Plotly

Do regular html components have a hoverData attribute, or just dcc.Graph?

Just dcc.Graph

(Sorry I read your title and jumped to conclusions! The link I shared is for arbitrary on hover components for graphs, but not for regular components)

One thing that’s built in to HTML is the title property. This property will show a text tooltip after a few seconds of hovering, and is built in to web browsers/html.

@trevor-pope

See also the dbc.Tooltip component in dash-bootstrap-components library:

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tooltip/

These are useful, but not quite what I’m looking for. Ideally I’d be able to have a callback on hover, that way I can change some arbitrary component on the app (i.e. change the text of a div if I’m hovering over a html.Button or something). I think my only option is to create my own component in javascript at this point…

Você sabe me falar os parametros para passar um gráfico de informações sobre cada filial dentro de um tooltip em um gráfico de barras no qual cada barra representa as quantidades em determinada filial?

O resultado que quero é que esse gráfico seja filtrado ao passar o mouse sobre a respectiva barra

Algo similar ao exemplo abaixo feito em Power BI é possível?

This is a duplicate post. See response here: How to use dcc.Tooltip in a bar chart? - #2 by AnnMarieW