dbc.Tooltip remove background

Dash Python
1

Hi, there’s a way to remove the dark background around the image from dbc.Tooltip?

tooltip
tooltip561×531 150 KB

The simple code is:

                    dbc.Row([

                        html.Div([

                            dbc.Button(
                                "Data das pêntadas",
                                id="pêntadas",
                                n_clicks=0,
                                color='success',
                                className="me-2 mb-2"
                            ),
                            dbc.Tooltip(
                                html.Img(src=dash.get_asset_url('pentadas.png'), style={'width': '300%'}),
                                id='pentadas-tooltip',
                                target="pêntadas",
                                # is_open=False,
                                placement="bottom",
                                style={'border': 'none'}
                            ),  
                            dbc.Button(
                                "Região de estudo",
                                id="seb",
                                n_clicks=0,
                                color='success',
                                className="me-2 mb-2"
                            ),
                            dbc.Tooltip(
                                html.Img(src=dash.get_asset_url('seb_brasil.png'), style={'width': '300%'}),
                                target="seb",
                                placement="bottom",
                            ), 
                            dbc.Button(
                                "Limites utilizados",
                                id="limites",
                                n_clicks=0,
                                color='success',
                                className="me-2 mb-2"
                            ),
                            dbc.Tooltip(
                                html.P('Limiar de chuva: 3.54 mm Limite ONSET: 5 pêntadas Limite DEMISE: 7 pêntadas'),
                                target="limites",
                                placement="bottom",
                            ), 
                        
                        ])

                    ]),

Thanks.

2

Hi you could try the following:

  1. Add custom css class to your tooltip. Let’s call it ‘custom-tooltip’ for example.
dbc.Tooltip(
    html.Img(
        src="pentadas.png",
        style={"width": "300%"},
    ),
    id="pentadas-tooltip",
    target="pêntadas",
    is_open=True,
    placement="bottom",
    className="custom-tooltip",
),
  1. Create a folder called ‘assets’ in the same directory that your app is running if you don’t already have one. Make a file inside here called ‘custom.css’ or any other css file name you want.

Modify the properties of the tooltip using this new css class. I have given a quick example below but you may want to experiment using other properties. You can also adjust the arrow using the css selector .custom-tooltip .tooltip-arrow {… if you like.


.custom-tooltip {
    background: transparent !important;
    border: 1px solid !important;
    box-shadow: none !important;
}

.custom-tooltip .tooltip-inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

Cheers and hope that helps