Add tooltips to badges and unify appearance with chartjs

package.json

@@ -35,6 +35,7 @@
     "vue-chartjs": "^5.3.2",
     "vue-i18n": "^10.0.5",
     "vue-router": "^4.5.0",
+    "vue-tippy": "^6.5.0",
     "xstate": "^5.19.0"
   },
   "devDependencies": {

src/assets/main.scss

@@ -74,3 +74,26 @@ body {
 .outline-override > :focus {
   @apply outline-sky-500;
 }
+
+.tippy-box {
+  @apply mx-2;
+  @apply bg-sky-950;
+}
+
+.tippy-content {
+  @apply p-2 text-sm;
+  @apply text-slate-50;
+}
+
+.tippy-box[data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: #082f49;
+}
+.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: #082f49;
+}
+.tippy-box[data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: #082f49;
+}
+.tippy-box[data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: #082f49;
+}

src/components/AchievementBadge.vue

@@ -143,9 +143,13 @@ const achievementProps: AchievementProps = {
 <template>
   <div
     :aria-disabled="!active"
-    :title="
-      $t(`achievements.${achievement}.ariaLabel`, achievementProps[achievement][level]!.textProps)
-    "
+    v-tippy="{
+      aria: null,
+      content: $t(
+        `achievements.${achievement}.ariaLabel`,
+        achievementProps[achievement][level]!.textProps,
+      ),
+    }"
     :aria-label="
       $t(`achievements.${achievement}.ariaLabel`, achievementProps[achievement][level]!.textProps)
     "
@@ -193,7 +197,7 @@ const achievementProps: AchievementProps = {
 
 .badge__text {
   @apply absolute bottom-[3cqmin] min-w-full text-nowrap rounded-md text-center text-xs uppercase;
-  @apply bg-slate-700 text-slate-50;
+  @apply bg-sky-950 text-slate-50;
 }
 
 .badge__background--Bronze {

src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AchievementBadge > renders active 1`] = `
-"<div data-v-06381b3c="" aria-disabled="false" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
+"<div data-v-06381b3c="" aria-disabled="false" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
   <div data-v-06381b3c="" class="badge__background badge__background--Gold" aria-hidden="true">
     <div data-v-06381b3c="" class="badge__emoji">🦅</div>
   </div>
@@ -10,7 +10,7 @@ exports[`AchievementBadge > renders active 1`] = `
 `;
 
 exports[`AchievementBadge > renders inactive 1`] = `
-"<div data-v-06381b3c="" aria-disabled="true" title="10 week streak of over 30 veggies" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
+"<div data-v-06381b3c="" aria-disabled="true" aria-label="10 week streak of over 30 veggies" data-test-id="badge-hotStreak-2" class="badge" role="img">
   <div data-v-06381b3c="" class="badge__background badge__background--Silver" aria-hidden="true">
     <div data-v-06381b3c="" class="badge__emoji">🔥</div>
   </div>