Change text size of dbc tooltip?

Dash Python
1

I want to make the text in my tooltip bigger. By default it’s pretty small which is hard to read. Is there any way to do this?

Thanks in advance.

2

A lot of Dash-Bootstrap-Components are restricted by its max-width, so simply change its style:

dbc.Tooltip(
‘This is a big tooltip!’,
target = ‘tooltip_target’,
style = {
‘font-size’: 50,
‘maxWidth’: 600,
‘width’: 600
}
)

1 Like
3

I’m struggling to figure out how to change the width of the tooltip text box that is displayed. This would appear to be the answer. Problem is, when I apply the exact style value given in the example, I get really big text, but the size of the box is the same. The change causes the box’s position to be offset a significant distance to the left, but the size is the same. If anyone could help me to get over this hurdle and increase the width of the displayed block of text, I’d very much appreciate it.

In case it matters: I’m using the Bootstrap Components module to create some tables. The items I’m applying tooltips to are html.Div elements in html.Td elements in my tables. The only styles I’ve explicitly applied to my GUI are whatever I get by choosing a Bootstrap theme when I create my Dash app component.

4

Hello @Blatwurst,

Font size is dependent upon what you want to see. You can use vw to get a responsive font size.

Check out more here:

Just play around with the numbers until you get something that works well for your use case.

CSS is a bit tricky, but learning it can be rewarding because it can do some really cool stuff.

5

Oh, that’s a neat trick with font size and vw. So for Dash, the W3 example would be
style={"fontSize":"10vw"}

Another option is that Bootstrap font sizes are already responsive. You can check it out on Bootstrap Utility Classes page of the Dash Bootstrap Theme Explorer - if you go to the font size example and change the size of the browser window, you’ll see the fonts scale. Also, the text-wrap class might be helpful. You can see that in the “text styles” example.