Control button util: Implement control button tooltips
Description
Adds aria-labels to our control buttons and duplicates Tumblr's on-hover tooltips.
Resolves #973.
Testing steps
Enable Quick Tags and/or Trim Reblogs. Mouse over the control buttons with the viewport width both greater and less than 990px and with touchscreen emulation turned on and off.
Right now this is an exact clone of Tumblr's DOM structure and CSS, which could probably be simplified. More importantly, though, it doesn't allow tooltips to be wider than about one word.
Things to figure out include:
- One word tooltips or multiple word?
- If multiple, should the words be on one line (and thus be wider than the native tooltips) or wrapped (looks bad)?
- Should we mark that these are XKit-added in some way?
Current commit screenshot, with graphics I stole from #1064/#1065:
I think an X inside a rounded rectangle, especially a white X on a black background, means something very different now.
The purple is the only thing the addon icon has going for it.
Ah. Well... shit.
Question is, should these be active in the ≤990px width mobile view? Tumblr's are not.
Hmm, I don't really like custom tooltips in general. Simplest thing would just be to add aria-label and title.
Sure: #1404.