[dashboard] Show a tooltip with billing cycle dates when hovering over remaining hours #4398
Conversation
|
/werft run 👍 started the job as gitpod-build-jx-remaining-hours-tooltip.2 |
There was a problem hiding this comment.
Whoa! Thanks for picking this up @jankeromnes! 🌟
The title attribute seems to work for now. Ideally this would look like a tooltip element as described in #4223 but feel free to leave this out of the scope of this iteration. 🛹
Feel free to forward this to someone to review the frontend here if needed. 🏓
| @@ -433,7 +433,7 @@ export default function () { | |||
| {!assignedTs && ( | |||
| <p className="text-base w-96 m-auto">Upgrade your plan to get access to private repositories or more parallel workspaces.</p> | |||
| )} | |||
| <p className="mt-2 font-semibold text-gray-500">Remaining hours: {typeof(accountStatement?.remainingHours) === 'number' | |||
| <p className="mt-2 font-semibold text-gray-500" title={guessCurrentBillingCycle(currentPlan, accountStatement).map(d => d.toLocaleDateString()).join(' - ')}>Remaining hours: {typeof(accountStatement?.remainingHours) === 'number' | |||
There was a problem hiding this comment.
thought: It took me a while to realize this was added as a title attribute! 😇
There was a problem hiding this comment.
Titles are fantastic! I always hover over UI elements when I need more info, and pretty often I'm not disappointed. 😁
If we already have a tooltip component, I think we could do some JS-hacking to make it work for every element that has a title attribute.
There was a problem hiding this comment.
Titles are fantastic!
Agree, and title along with aria-label attributes can significantly improve product accessibility. 👀
If we already have a tooltip component ...
We do have first tooltip component implementation! 💬
I think we could do some JS-hacking ...
I'd not expect to see a tooltip element every time we're using the title attribute as this could make the user interface unnecessarily verbose, however, we can try this and see if we need to tone this down. 🏀
jankeromnes
force-pushed
the
jx/remaining-hours-tooltip
branch
from
bc7996c
to
a4b0366
Compare
…r remaining hours
jankeromnes
force-pushed
the
jx/remaining-hours-tooltip
branch
from
a4b0366
to
418b065
Compare
|
/werft run 👍 started the job as gitpod-build-jx-remaining-hours-tooltip.5 |
|
/werft run 👍 started the job as gitpod-build-jx-remaining-hours-tooltip.6 |
…r remaining hours (gitpod-io#4398)
Fixes #4223