DataTable tooltip view size

Dash Python
1

I really appreciate how simple it is to add tooltips to both column headers and individual cells in the dash DataTable. :clap:

One thing Iā€™m missing is some instructions how to change the size of the tooltip view. I understand it will be done through some CSS magic but I have no idea how to do that. Does anybody know? :slight_smile: Ideally, I would like to set different sizes for column headers tooltips and for cell tooltips.

image
image908Ɨ150 21.6 KB

2 Likes
2

A little late for OP but for everyone having the same issue:

The internal style sheet used by dash has both min-width and max-width set to 300px. If you want to resize the tooltip, you likely have to unset one or both of them.

As an example: the following CSS rules will yield an adaptive-width tooltip with maximum width of 300px

.dash-table-tooltip {
    width: fit-content;
    /* max and min width are both set to 300px in the dash stylesheet. Override them with your own definitions. */
    max-width: 300px;
    min-width: unset;  
}
4 Likes