[Feature Request] Allow setting the `title` property of the label surrounding the `RadioItem` and `Checklist` choices.

[mjstahlberg]

Is your feature request related to a problem? Please describe. Radioitem and checklist options typically have short labels so sometimes it would be helpful to add a descriptive tooltip to them. For a user-defined label, this is possible via html.Label(title="…"). For labels created through RadioItem or Checklist, this does not seem possible.

Describe the solution you'd like In addition to disabled, label, value, allow setting the title on an option.

Describe alternatives you've considered I've seen a workaround using dbc but apart from requiring the bootstrap components, that solution is somewhat complicated and does not match the workflow of the html.Label component.

[LenAnderson]

Seems like a bug / overlooked. The doc even mentions explicitly that a title can be set on Checklist options in order to show a tooltip.

https://dash.plotly.com/dash-core-components/checklist#checklist-properties

options is a list of strings | numbers | booleans | dict | list of dicts with keys: [...] title (string; optional): The HTML 'title' attribute for the option. Allows for information on hover. For more information on this attribute, see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title.

---

EDIT:

Unfortunately dbc.Tooltip no longer uses querySelector to find the target but document.getElementById, labelId also no longer exists. So the dbc workaround no longer works either.

[ned2]

Given that the Dash docs (for both Checklist and RadioItems) explicitly state that the title attribute in the list of options will set the title attribute for each HTML option, I wonder if this might be a bug rather than a feature request.

Came looking for an issue along these lines after I discovered this wasn't working.

[harxish]

@ned2 Can I take this and work on it ?

[ned2]

@harxish I'm not a Dash maintainer, but given that this issue has been tagged with good first issue, I reckon you should go for it!

[SterlingButters]

You can also put components into a Div and set the title there

[celia-lm]

Hi all!

As the fix hasn't been included in Dash yet, here's an updated workaround using components as options:

from dash import Dash, dcc, html, Input, Output
import dash_mantine_components as dmc

app = Dash(__name__)

def my_checklist_option(label, value, title) :
    return {
        'label': [
                dmc.Tooltip(
                    label=title,
                    children= html.Span(label)
                )
            ],
         'value': value
        }

app.layout = html.Div(
    dcc.Checklist(
        options=[
            my_checklist_option(
                label=i, 
                title=f'{i} is a city in North America', 
                value=i
                ) for i in ['New York City', 'Montreal','San Francisco']
        ],
        labelStyle={"display": "flex", "align-items": "center"}
    ),
    style={'padding':'50px'}
)

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

For developers: code to replicate the issue

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

app.layout = html.Div(
    dcc.Checklist(
    options=[
        {'label': i, 'value': i, 'title':f'{i} is a city in North America'}
        for i in ['New York City', 'Montreal','San Francisco']
    ],
    value=['Montreal']
    ),
    style={'padding':'50px'}
)

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