Tooltip with instructions on hover over or near Upload button

Dash Python
1

I have a file upload button in my dashboard like this:

...
dbc.Row([
            dbc.Col(
                dcc.Upload(
                    id='upload-data',
                    children=html.Div(['Upload file']),
                    style={
                        'width': '100%',
                        'height': '60px',
                        'lineHeight': '60px',
                        'borderWidth': '1px',
                        'borderStyle': 'dashed',
                        'borderRadius': '5px',
                        'textAlign': 'center',
                        'margin': '10px'
                    },
                    multiple=False  # Allow multiple files to be uploaded
                ),
            width = 12, lg=2, className="mt-4 border"),
        ])

I would like to include functionality for a tooltip to appear when the user either hovers over the button.

I know that I can just insert a question mark to the right of the button as per discussion here, but it looks kind of out-of-place like that. In the attached image the question mark is below the button, but gets the point across about how it looks.

image
image691Ɨ213 2.11 KB

Is this possible?

2

Hey @matsuobasho is that different to just using the tooltip from dbc?

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

1 Like
3

@AIMPED This is exactly what Iā€™m looking for. Thanks for the answer!

1 Like