Jazzing up the SelectWidget with emojis and tooltips

Charlie_Veniot · March 17, 2023, 3:38am

Looking around the web, it seems like there is no such thing as styling select elements with CSS.

I’m a bit of the “who cares” mindset when I’ve got emojis available to me and I can add simple tooltips via the “title” attribute.

<$select tiddler='hey' field='there' tooltip='Choose a new site title'>
<optgroup label='Books'>
<option title="A tooltip for this entry">📚 Fundamentals of Computer Programming</option>
<option>📚 Graphics, Animation, and Sound</option>
<option>📚 BAM User Guide</option>
<option>📚 Metaprogramming</option>
<option>📚 BAM + TiddlyWiki Integration Projects</option>
</optgroup>
</$select>

Charlie_Veniot · March 17, 2023, 4:23am

I should have hit the pillow a long time ago, but just could not stop fiddling around with this.

<$select tiddler='hey' field='there' tooltip='Choose a new site title'>
<optgroup label="⯁ What's New">
<option title="Latest changes made to the documentation">✏ Recent Updates to This Documentation</option>
<option>📰 BASIC Anywhere Machine - News</option>
<option>🪲 Known Bugs</option>
</optgroup>
<optgroup label='⯁ Books'>
<option>📘 About BASIC Anywhere Machine</option>
<option>📚 Fundamentals of Computer Programming</option>
<option>📚 Graphics, Animation, and Sound</option>
<option>📚 BAM User Guide</option>
<option>📚 Metaprogramming</option>
<option>📚 BAM + TiddlyWiki Integration Projects</option>
</optgroup>
<optgroup label='⯁ References'>
<option>🔑 BAM Language Reference</option>
<option>🏛 Bibliography</option>
</optgroup>
</$select>