[Beginner] Conditional tooltip only on cell overflow

Dash Python
1

Hi,

I am having trouble with my conditional tooltip and can’t seem to figure it out.

I want to use this tooltip, but only apply it when the cell is overflowing.
(It just shows the value of the cells in the description column.)
By default the tooltip shows for all cells.

style_cell={
    'overflow': 'hidden',
    'textOverflow': 'ellipsis',
    'maxWidth': 300,
},

# tooltip_data=[
#     {
#         'Description': {
#             'value': str(row['Description']),
#             'type': 'markdown'
#         }
#     } for row in df.to_dict('records')
# ],

I tried to use a similar format but it does not work as expected.
The ‘filter_query’ works as I can have the tooltip only display on certain cells.
However the ‘value’ does not work as it only displays ‘nan’.
Additionally I am not sure how to write a filter query to detect overflow cells.
Any help is appreciated.

tooltip_conditional=[
    {
        'if': {
            'filter_query': '{Description} contains "???"'
        },
        'value': str(row['Description']),
        'type': 'markdown',
    } for row in df.to_dict('records')
],

Thanks!

2

Update: I’ve found a solution to the first part of my problem after looking at some more examples:

tooltip_data=[
        {
            'Description': {
                'value': 'Text contains "BOSS": {}'.format(
                    'yes'
                    if 'BOSS' in str(row['Description'])
                    else 'no'
                ),
                'type': 'markdown'
            }
        } for row in df.to_dict('records')
    ],

This checks whether each cell in the description column contains a certain text. And only then will it display a tooltip.

Now I need a condition for checking if the cell is overflowing.
Problem is I do not know how to access the individual cell data.
I can check the ‘maxWidth’ since I have that specified. But I’m not sure exactly how to do that.

Thanks

3

Hello @daflamingpotato,

Welcome to the community!

Have you considered trying to do this with AG grid instead?

It does take some JS, but you can perform all kinds of checks from it inside the function call:

4

Thanks, I did end up switching to dash-ag-grid for other reasons.
I got a custom tooltip working but decided not to mess with the “only overflow” option. Didn’t seem necessary any more

2 Likes