Tooltip with the full content of the options in the Dropdowns

Dash Python
1

Hello everyone, I have some dcc.Dropdowns whose option strings are very long, and therefore it is not possible to read the entire text. Is it possible to add a tooltip when hovering over the options?

image
image1139×344 29 KB

Thanks!!

2

Hi @miloski, could you share the code for your dropdown (including styling)?
I believe your options should wrap automatically on the next line, then you can adjust optionHeight for increased lisibility.

3

Hello, sorry for the delay!

Here is the complete dcc.Dropdown code (it is inside a class).

        self.dropdown = dcc.Dropdown(
            id = id_dropdown,
            multi = multi,
            options = dropdown_options,
            optionHeight = 60,
            placeholder = 'Selecione...',
            value = value,
            disabled = disable,
            clearable=clearable,
            style={"width": "100%"}
        )

In the example above, it was defined as follows:

        self.dropdown = dcc.Dropdown(
            id = 'causabas_capitulo-dropd_filte'r,
            multi = True,
            options = list_of_options,
            optionHeight = 60,
            placeholder = 'Selecione...',
            value = None,
            disabled = False,
            clearable=True,
            style={"width": "100%"}

I increased the Height trying to solve the problem, but the options are still unreadable.

4

Hi @miloski

The title attribute in the dcc.Dropdown options will show the options in a tooltip. For example:

options=[{"label": o, "value": o, "title": o} for o in long_options]

Below is a complete example. Note that @jhupiterz is correct – typically verbose options will wrap to the next line, so you must have some CSS that hides the overflow. I was able to duplicate the image you included by adding "whiteSpace":"nowrap" to the dropdown.

long-dropdowns

from dash import Dash,html, dcc

app = Dash(__name__)

long_options = [
    "Here is a very long thing you can select",
    "This is another a very long description to choose fromt",
    "Yet more very long options with even more details"
]

long_dropdown = dcc.Dropdown(
    options=[{"label": o, "value": o, "title": o} for o in long_options],
    value = long_options[0],
    style={"width": "100%", "whiteSpace":"nowrap"}
)


app.layout = html.Div(
    [
        long_dropdown,
        # other stuff        
    ],
    style={"maxWidth":200}
)

if __name__ == "__main__":
    app.run_server(debug=True)
4 Likes
6

Thank you very much @AnnMarieW ! Indeed, by adding the title attribute I was able to visualize the tooltips.

However, I still can’t get the line break that you said you could only avoid using “nowrap”.

I tried changing the whiteSpace attribute to the following values, and none of them worked: nowrap, wrap, normal, pre, pre-wrap, pre-line, break-spaces, and inherit.

Although the tooltip helps, the ideal scenario would actually be to wrap the line to show all the content without needing the help of the mouse.

7

Hi @miloski

The dcc.Dropdown options wrap to a new line by default. I added the "whiteSpace": "nowrap" to force it to look like the image you provided in your original post.

Note that you can also update the height of the options to make the text easier to read using the optionHeight prop

Try running the example I posted, but change the long_dropdown to this:


long_dropdown = dcc.Dropdown(
    options=[{"label": o, "value": o, "title": o} for o in long_options],
    value = long_options[0],
    optionHeight=75,
  #  style={"width": "100%", "whiteSpace":"nowrap"}
)

It should look like this image. If it doesn’t, you probably have some custom CSS in your project that conflicts with the the dcc.Dropdown

image
image492×594 44.8 KB

2 Likes
8

Thank you again, indeed i had a nowrap on my styles.css! Problem solved!

1 Like