Add id to radioitems.options options so that one can attach tooltips to them

[Jerry-Ma]

Hi,

Thank you for this fantastic package!

I started to play with the radio items and found that currently it is not easy to add tooltips for the items.

The issue is that dbc.Tooltip needs an target property but if we use a plain dbc.RadioItems, the created option items do not have an id.

I also tried using the stand alone radio item approach, and I can create the layout as expected, but
I have no idea how to implement the mutually exclusive checking behavior using clientside callbacks (I saw some discussion here #241).

Any suggestions?

[Jerry-Ma]

It appears that one does not need id because I found that the target property is passed as is to the react component underlying, so a css selector can be passed:

for i in range(len(options)):
     target=f'radio_items_id > .custom-radio:nth-of-type({i + 1}) label'
     dbc.Tooltip(target=target, ...)

[tcbegley]

That looks like a nice workaround!

I'll look at adding label_id and input_id options to RadioItems and Checklist

[tcbegley]

Adding this in #379, seems to work well 👍

import dash
import dash_bootstrap_components as dbc

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.RadioItems(
            id="radios",
            options=[
                {"label": f"Item {i}", "value": i, "label_id": f"my-label-{i}"}
                for i in range(5)
            ],
        )
    ]
    + [
        dbc.Tooltip(f"Tooltip for item {i}", target=f"my-label-{i}")
        for i in range(5)
    ]
)

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

Will close this when it makes it into a release.

[Jerry-Ma]

Great, thank you very much!

[tcbegley]

This is now available in version 0.10.1