How to change dash table tooltip size

Dash Python
1

I want to change dash table tooltip width.
I tried to use custom css, but did not work.

assets/custom_css.css
.dash-tooltip .dash-table-tooltip {
max-width: 200px;
min-width: 100px;
}

I also tried to use dash_table.css option

dash_table.DataTable(
…
css=[{‘selector’: ‘dash-table-tooltip’, ‘rule’: ‘max-width: 200px; min-width: 100px;’}],
…)

How can I change dash table tooltip style?

2

Same problem here, could you figure it out?

3

Okay nevermind, I finally found it!

It’s pretty simple actually, you just have to override both the width and the max-width property on .dash-table-tooltip, and remember to add !important so they get precedence.

This is the related file from the tooltips PR where you can see the default styles: https://github.com/plotly/dash-table/pull/338/files#diff-02b1c6154ad8311a2face953de21380d

2 Likes
4

I’ve got this same question. Problem is, I’m a back-end programmer who has barely touched HTML and CSS. So the instructions you’ve provided don’t lead me to a clear solution. I tried a few things, but the only change that I ever got was to have the text box be offset to the left, even though I’d only changed width and/or maxWidth via style={...}. If someone could supply a little Python code to show how one changes the width of the Tooltip text box that displays during hovering, that would be wonderful!

5

Thanks a lot. This works for me and i leave here a snippet code to show how i applied this advice:
css=[
{‘selector’: ‘.dash-table-tooltip’,
‘rule’: ‘background-color: white; color: white; width:500px !important; max-width:500px !important;’,
‘z-index’: ‘0’, ‘position’: ‘absolute’, ‘border’: ‘solid’, ‘border-color’: ‘red’},]

Where css is a dash datatable parameter

6

check mi answer