title option in options seems to not work

[PatSev]

Describe your context

I would like to display information on hover an element of a checklist, but, it seems that does not work with the option title of options.

options (list of dicts; optional): An array of options. title (string; optional): The HTML ‘title’ attribute for the option. Allows for information on hover. For more information on this attribute, see title - HTML: HyperText Markup Language | MDN.

Below, this is the version of dash package that I use: dash 2.14.2 dash-ag-grid 31.0.1 dash-bootstrap-components 1.5.0 dash-bootstrap-templates 1.1.2 dash-core-components 2.0.0 dash-html-components 2.0.0 dash-table 5.0.0

How I use this option : { "label": html.Div(['London'], style={'color': 'LightGreen', 'font-size': 20}), "value": "London", "title": "test", },

[CNFeffery]

@PatSev A more recommended approach is to add a tooltip to the tag of each option:

import dash
from dash import html
import feffery_antd_components as fac

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        fac.AntdCheckboxGroup(
            options=[
                {
                    'label': fac.AntdTooltip(
                        f'Option{i}',
                        title=f'This is Option{i}😉'
                    ),
                    'value': f'Option{i}'
                }
                for i in range(1, 6)
            ]
        )
    ],
    style={
        'padding': 50
    }
)

if __name__ == '__main__':
    app.run(debug=True)

dash==2.16.1
feffery_antd_components==0.3.0rc7

Related component documentation: https://fac.feffery.tech/AntdTooltip https://fac.feffery.tech/AntdCheckboxGroup

[yanns1]

Why a new package for this?

A quick look at components/dash-core-components/src/components/Checklist.react.js shows that indeed the title option is not used in the component.

Adding the line

<label
    key={option.value}
    style={{
        display: inline ? 'inline-block' : 'block',
        ...labelStyle,
    }}
    className={labelClassName},
    title={options.title} // <- HERE
>
    <input
        checked={includes(option.value, value)}
        className={inputClassName}
        disabled={Boolean(option.disabled)}
        style={inputStyle}
        type="checkbox"
        onChange={() => {
            let newValue;
            if (includes(option.value, value)) {
                newValue = without(
                    [option.value],
                    value
                );
            } else {
                newValue = append(option.value, value);
            }
            setProps({value: newValue});
        }}
    />
    {option.label}
</label>

would probably do it.

Note that I placed the title on the label, but we could also put it on the input. I think it makes more sense to put it on the label, in either case it needs to be documented.