I have a form with a picklist filed with the field type set to "select". When someone drops down the field and scrolls over different the picklist values, I would like a helper text to appear giving a description of each picklist value so they can select the value that makes the most sense to them. Is this possible?
Solved! Go to Solution.
You can set the standard title attribute on any <option>.
However, the UX is pretty... shall we say, light... on desktop:
And on mobile, where choosing/scrolling is within the system modal <select> (i.e. rendered by the browser on top of your page) you wouldn’t see the value at all:
I agree with Jo that your helper text should just be part of the option text (not the server value). This is the only thing that will ever be cross-browser.
@arpitha_kunjur, your desired approach has a few issues that I can see:
Why can't you make your picklist values clear? Remember, just because you store 'bob' in the database doesn't stop you from displaying 'Robert the Bruce' in the picklist.
What is the use case you are trying to solve? One alternative MAY be to display more detailed text under the picklist after a person has chosen a value. I still am not a fan of that however.
Cheers
Jo
You can set the standard title attribute on any <option>.
However, the UX is pretty... shall we say, light... on desktop:
And on mobile, where choosing/scrolling is within the system modal <select> (i.e. rendered by the browser on top of your page) you wouldn’t see the value at all:
I agree with Jo that your helper text should just be part of the option text (not the server value). This is the only thing that will ever be cross-browser.