Allow tooltips on <option>

[dwt]

On <select> controls, there is currently no way to precisely set title attributes of <option> elements and control precisely what is in them.

I worked around this by using a custom form control that duplicates the template and then customizes it for this bit. Which I think is unoptimal.

(There is a way to get title-attributes on <option> elements, but it requires the use of the OptGroup class, which is a completely different beast and still doesn't give precise control over the title attribute of the option elements alone (and adds the <optgroup> elements, which we don't want)

I'm not sure what the best way to do this would be, my workaround was to use a triple of (label, value, title) instead of the tuple that is used right now.

What would you guys be willing to accept? How would you give control to the user for this?

(I am of course aware that most browser don't render title attributes on <option> elements, however we are transforming the <select> elements with select2 afterwards - also the select2 template you provide also doesn't allow to control title attributes.)

[stevepiercy]

As you found, browser support for title attribute is inconsistent, and there are preferred ways of displaying tooltips.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title#Accessibility_concerns

Can you provide a link to title support in the Select2 widget? I can't find it easily:

• https://duckduckgo.com/?q=site%3Ahttps%3A%2F%2Fselect2.org%2F+tooltip
• https://forums.select2.org/search?q=tooltip

Also a couple of screenshots to illustrate what you want would help me visualize the issue.

[dwt]

The effect I achieved using the above mentioned workaround is this:

i.e. all the option elements have a title attribute that gives additional information about what the chosen element does.

I'm not sure it's even specially documented on the select2 page. What it does is select2 supports all options on standard <selects> and that happens to include to transform them to something the browsers consistently render title attributes (thus negating many of the disadvantages the mozilla article talks about)

Does that help?

Basically, I would like to have a way to have more influence on the built option elements. Bonus points if it enables me to set data-attributes or whatever else I want. Not sure this is viable, but a dictionary that maps {attr:value} might make a lot of sense.

[stevepiercy]

I'd be willing to accept a PR, but I personally wouldn't have a use for it. I see too many UX issues with this approach. Would tooltips work on mobile where there is no hover property? And does a tap mean show me the tooltip or select the item?

I would suggest instead using either text with tooltips in the form and not on the <select>, or a <radio> or <checkbox> input that supports easier to style labels.

[stevepiercy]

@dwt I would still accept a PR for your workaround. I've done similar things in a custom template with the tuple for a table of checkboxes. The PR would need to include tests and documentation, and probably a matching functional test in deformdemo.

Alternatively we will be creating a separate repo under Pylons for the community to contribute their custom widgets with or without tests and documentation.

[dwt]

I don't have any time for this right now, but if I do get around to work on this again, I'd be happy to provide a pull request.