Any way to introduce delay in tooltip hiding in DashTable?

Dash Python
1

Hi,
I’ve noticed that dbc.Tooltip has a delay for both show and hide. However, in the tooltip option within the DashTable, there is only a delay to show the tooltip. I want to introduce a scroll feature in the datatable’s tooltip. With the help of css, I was able to introduce the scroll functionality, except I have one big problem. I can’t get the tooltip hover to stay enough for the cursor to go to the tooltip to scroll. Does anyone have any idea to solve this?

def create_table_container(dataset, option ):

    return dbc.Container([
            # ROW 1 : Heading and Expand table button
            dbc.Row([
                dbc.Col(html.H6(f"{option.title()} Data :"), width= 5),
                dbc.Col([
                    # Button to open modal for expanded view
                    dbc.Button("Expand Table", id="open-modal", className="mb-3", color="dark", outline= True, size = "sm"),
                        ],  width={"size": 3, "order": "last", "offset": 1}),
                ], justify="around"),

            # ROW 2 : Creating the dash Datatable
            dbc.Row([ dbc.Col([               
                dash_table.DataTable(
                    id = "data-table",
                    columns=[{"name": i, "id": i} for i in dataset.columns],
                    data=dataset.to_dict('records'),
                    style_table={'height': '330px', 'overflowY': 'auto'},  # Scroll
                    style_header={'backgroundColor': 'rgb(30, 30, 30)', 'color': 'white'},
                    column_selectable="single",  # Allows the user to select a single column
                    style_cell_conditional=[
                        {'if':{'column_id': 'title'},
                         'width': '200px'},
                         {'if':{'column_id': 'video_id'},
                         'width': '96px'},
                         {'if':{'column_id': 'publishedDate'},
                         'width': '144px'},
                         {'if':{'column_id': 'comments'},
                         'width': '200px'}
                         
                    ],
                    style_cell={'textAlign': 'left', 
                                'padding': '5px',
                                'minWidth': '96px', 'width': '150px', 'maxWidth': '200px',
                                'overflow': 'hidden',
                                'textOverflow': 'ellipsis',
                                #  'maxWidth': 0
                                },
                    
                    tooltip_data=[
                        {
                            column: {'value': str(value), 'type': 'markdown'}
                            for column, value in row.items()
                        } for row in dataset.to_dict('records')
                    ],
                    tooltip_duration=None,
                    tooltip_delay =  50,
                    fixed_rows={'headers': True},
                    page_size= 10,
                    css=[
                            # Allow the tooltip to have a max-height and be scrollable
                            {
                                'selector': '.dash-tooltip',
                                'rule': 'max-height: 150px; overflow-y: auto;'
                            },
                            # Keep the tooltip visible when hovered
                            {
                                'selector': '[data-dash-tooltip]:hover .dash-tooltip, .dash-tooltip:hover',
                                'rule': 'display: block !important;'
                            }
                        ]
                )
            ])], justify = "center"),


        ])
2

Hello @ak3000,

I’m not sure there is a way to do this in DashTable. However, you can perform this in Dash AG grid, if you haven’t already, you should check out the documentation.