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.

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.

@ned2 Can I take this and work on it ?

@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!

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

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)