No longer using title on buttons to show tooltips. We were seeing issues where if the button was focused, the tooltip would either be shown nowhere near the button (on Edge) or not shown at all (on Firefox).
Now, we're using a div, as recommended here.
Screenshots
Level select button:
Defence config reset button:
Sending button:
Notes
Removed the LevelButton component entirely. Instead, we're now using a ThemedButton with a set class name.
Concerns
The parent of a ThemedButton with a tooltip must pass an ID to the ThemedButton component which is used to uniquely identify the tooltip. This is so the button can use aria-describedby and link to the tooltip div. I'm not sure how much I like this. We can't guarantee that these IDs will always be unique. We could instead let ThemedButton compute a random unique ID, like a UUID, but I'm not sure of the performance ramifications of that 🤔
For the "View Documents" and "send" buttons, we have to specify some .themed-button styling outside of ThemedButton.css in order for them to stretch the full width. I'd like to avoid this, but it was the cleanest solution I could think of.
Description
No longer using
titleon buttons to show tooltips. We were seeing issues where if the button was focused, the tooltip would either be shown nowhere near the button (on Edge) or not shown at all (on Firefox). Now, we're using adiv, as recommended here.Screenshots
Level select button:
Defence config reset button:
Sending button:
Notes
Concerns
buttoncan usearia-describedbyand link to the tooltipdiv. I'm not sure how much I like this. We can't guarantee that these IDs will always be unique. We could instead let ThemedButton compute a random unique ID, like a UUID, but I'm not sure of the performance ramifications of that 🤔.themed-buttonstyling outside of ThemedButton.css in order for them to stretch the full width. I'd like to avoid this, but it was the cleanest solution I could think of.Checklist
Have you done the following?