From aeaaad4039793ae2b67d8a44933e109bcb2db43a Mon Sep 17 00:00:00 2001
From: Anssi Juvonen <anssi.juvonen@gofore.com>
Date: Fri, 20 Dec 2024 15:25:32 +0200
Subject: [PATCH] Add tooltips to badges and unify appearance with chartjs

---
 package-lock.json                             |  32 ++++++
 package.json                                  |   1 +
 src/assets/main.scss                          |  23 ++++
 src/components/AchievementBadge.vue           |  12 ++-
 .../AchievementBadge.spec.ts.snap             |   4 +-
 .../AchievementList.spec.ts.snap              | 102 +++++++++---------
 src/i18n/en.json                              |   4 +-
 src/i18n/fi.json                              |   4 +-
 src/main.ts                                   |   7 ++
 src/utils/constants.ts                        |   1 +
 src/utils/helpers.ts                          |   4 +-
 vitest.setup.ts                               |   4 +
 12 files changed, 135 insertions(+), 63 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1cc2b0a..6bae69a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,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": {
@@ -2641,6 +2642,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "15.3.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.3.0.tgz",
@@ -9355,6 +9366,15 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
     "node_modules/tldts": {
       "version": "6.1.53",
       "resolved": "https://registry.npmjs.org/tldts/-/tldts-6.1.53.tgz",
@@ -11124,6 +11144,18 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-tippy": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/vue-tippy/-/vue-tippy-6.5.0.tgz",
+      "integrity": "sha512-U44UDETTLuZWZGosagslEwgimWQdt1JVSxfWStVPnVdeqo2jo9X5zW3SB04k7JaTFosdgrDhFsUDrd6n42Nh7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.1.10",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.10.tgz",
diff --git a/package.json b/package.json
index 0660119..fd1c9e0 100644
--- a/package.json
+++ b/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": {
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 42e786e..943d6a3 100644
--- a/src/assets/main.scss
+++ b/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;
+}
diff --git a/src/components/AchievementBadge.vue b/src/components/AchievementBadge.vue
index 43fa509..9daff7e 100644
--- a/src/components/AchievementBadge.vue
+++ b/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 {
diff --git a/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap b/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap
index cdf74dc..d42d46e 100644
--- a/src/components/__tests__/__snapshots__/AchievementBadge.spec.ts.snap
+++ b/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>
diff --git a/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap b/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
index 480d08a..8ae8b89 100644
--- a/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
+++ b/src/components/__tests__/__snapshots__/AchievementList.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">This week's toil</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-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>
@@ -17,19 +17,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Completionist</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🐣</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="80 unique veggies" data-test-id="badge-completionist-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" 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>
@@ -40,19 +40,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Challenge Accepted</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🚁</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-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>
@@ -63,19 +63,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Committed</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌱</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="6 months of active use" data-test-id="badge-committed-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="12 months of active use" data-test-id="badge-committed-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>
@@ -86,19 +86,19 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Hot Streak</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" 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="" data-v-1c120264="" 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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-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>
@@ -109,60 +109,60 @@ exports[`AchievementList > renders 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Playing Favorites</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 uses of a veggie in all categories" aria-label="5 uses of a veggie in all categories" data-test-id="badge-favorite-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 uses of one veggie in all categories" data-test-id="badge-favorite-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">😺</div>
         </div>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x5 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 uses</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 uses of a veggie in all categories" aria-label="20 uses of a veggie in all categories" data-test-id="badge-favorite-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 uses of one veggie in all categories" data-test-id="badge-favorite-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>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x20 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 uses</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="50 uses of a veggie in all categories" aria-label="50 uses of a veggie in all categories" data-test-id="badge-favorite-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="50 uses of one veggie in all categories" data-test-id="badge-favorite-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>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x50 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">50 uses</div>
       </div>
     </div>
   </div>
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Experimenter</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-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>
@@ -178,13 +178,13 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">This week's toil</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="30 unique veggies this week" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="30 unique veggies this week" data-test-id="badge-thirtyVeggies-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">30 Weekly</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies this week" aria-label="40 unique veggies this week" data-test-id="badge-thirtyVeggies-4" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="40 unique veggies this week" data-test-id="badge-thirtyVeggies-4" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Platinum" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">💎</div>
         </div>
@@ -195,19 +195,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Completionist</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="40 unique veggies" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="40 unique veggies" data-test-id="badge-completionist-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🐣</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">40 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="80 unique veggies" aria-label="80 unique veggies" data-test-id="badge-completionist-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="80 unique veggies" data-test-id="badge-completionist-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">80 veggies</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="150 unique veggies" aria-label="150 unique veggies" data-test-id="badge-completionist-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" 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>
@@ -218,19 +218,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Challenge Accepted</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 completed weekly challenges" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 completed weekly challenges" data-test-id="badge-challengeAccepted-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🚁</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="10 completed weekly challenges" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="10 completed weekly challenges" data-test-id="badge-challengeAccepted-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 challenges</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 completed weekly challenges" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 completed weekly challenges" data-test-id="badge-challengeAccepted-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>
@@ -241,19 +241,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Committed</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="3 months of active use" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="3 months of active use" data-test-id="badge-committed-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌱</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">3 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="6 months of active use" aria-label="6 months of active use" data-test-id="badge-committed-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="6 months of active use" data-test-id="badge-committed-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6 months</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="12 months of active use" aria-label="12 months of active use" data-test-id="badge-committed-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="12 months of active use" data-test-id="badge-committed-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>
@@ -264,19 +264,19 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Hot Streak</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 week streak of over 30 veggies" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 week streak of over 30 veggies" data-test-id="badge-hotStreak-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">🌶️</div>
         </div>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" 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="" data-v-1c120264="" 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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">10 Weeks</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 week streak of over 30 veggies" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 week streak of over 30 veggies" data-test-id="badge-hotStreak-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>
@@ -287,60 +287,60 @@ exports[`AchievementList > renders with badges enabled 1`] = `
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">Playing Favorites</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="5 uses of a veggie in all categories" aria-label="5 uses of a veggie in all categories" data-test-id="badge-favorite-1" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="5 uses of one veggie in all categories" data-test-id="badge-favorite-1" class="badge" role="img">
         <div data-v-06381b3c="" class="badge__background badge__background--Bronze" aria-hidden="true">
           <div data-v-06381b3c="" class="badge__emoji">😺</div>
         </div>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x5 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">5 uses</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="20 uses of a veggie in all categories" aria-label="20 uses of a veggie in all categories" data-test-id="badge-favorite-2" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="20 uses of one veggie in all categories" data-test-id="badge-favorite-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>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x20 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">20 uses</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" title="50 uses of a veggie in all categories" aria-label="50 uses of a veggie in all categories" data-test-id="badge-favorite-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="true" aria-label="50 uses of one veggie in all categories" data-test-id="badge-favorite-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>
-        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">6x50 samples</div>
+        <div data-v-06381b3c="" aria-hidden="true" class="badge__text">50 uses</div>
       </div>
     </div>
   </div>
   <div data-v-1c120264="" class="flex-container flex-col">
     <h2 class="label-like">The Experimenter</h2>
     <div data-v-1c120264="" class="achievement-list__badge-container">
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique fruits and berries" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique fruits and berries" data-test-id="badge-experimenterFruit-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Fruits</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique vegetables" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique vegetables" data-test-id="badge-experimenterVegetable-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Vegetables</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique leafy greens" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique leafy greens" data-test-id="badge-experimenterLeafy-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Leafy Greens</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique roots and bulbs" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique roots and bulbs" data-test-id="badge-experimenterRoot-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Roots</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique beans and legumes" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique beans and legumes" data-test-id="badge-experimenterBean-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>
         <div data-v-06381b3c="" aria-hidden="true" class="badge__text">Beans</div>
       </div>
-      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" title="15 unique grains, nuts and seeds" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-3" class="badge" role="img">
+      <div data-v-06381b3c="" data-v-1c120264="" aria-disabled="false" aria-label="15 unique grains, nuts and seeds" data-test-id="badge-experimenterGrain-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>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4f2e9e7..8b7a51a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -62,8 +62,8 @@
     },
     "favorite": {
       "title": "Playing Favorites",
-      "ariaLabel": "{0} uses of a veggie in all categories",
-      "badgeText": "6x{0} samples",
+      "ariaLabel": "{0} uses of one veggie in all categories",
+      "badgeText": "{0} uses",
       "1": "You have sampled your favorite veggies at least 5 times in each category, earning you the bronze achievement!",
       "2": "You have sampled your favorite veggies at least 20 times in each category, earning you the silver achievement!",
       "3": "You have sampled your favorite veggies at least 100 times in each category, earning you the gold achievement!"
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index 1d94e23..bde8b3c 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -62,8 +62,8 @@
     },
     "favorite": {
       "title": "Omat suosikit",
-      "ariaLabel": "Yksi kasvis {0} kertaa joka ryhmässä",
-      "badgeText": "6x{0} kokeilua",
+      "ariaLabel": "{0} kertaa kokeiltu kasvis joka ryhmässä",
+      "badgeText": "{0} kokeilua",
       "1": "Olet kokeillut suosikkikasviksiasi vähintään viisi kertaa joka ryhmässä, ansaiten pronssisen palkinnon!",
       "2": "Olet kokeillut suosikkikasviksiasi vähintään 20 kertaa joka ryhmässä, ansaiten hopeisen palkinnon!",
       "3": "Olet kokeillut suosikkikasviksiasi vähintään 50 kertaa joka ryhmässä, ansaiten kultaisen palkinnon!"
diff --git a/src/main.ts b/src/main.ts
index b18ed97..c9c1385 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,13 @@
 import {createApp} from 'vue';
 import {createPinia} from 'pinia';
+import {plugin as VueTippy} from 'vue-tippy';
 import App from '@/App.vue';
 import router from '@/router';
 import i18n from '@/i18n';
 
 import '@fontsource/bungee-shade/latin-400.css';
 import '@fontsource/nunito/latin-400.css';
+import 'tippy.js/dist/tippy.css';
 import '@/assets/main.scss';
 
 import IconComponent from '@/components/IconComponent.vue';
@@ -17,6 +19,11 @@ app
   .use(createPinia())
   .use(router)
   .use(i18n)
+  .use(VueTippy, {
+    defaultProps: {
+      hideOnClick: true,
+    },
+  })
   .component('IconComponent', IconComponent)
   .component('ButtonComponent', ButtonComponent)
   .component('ContentElement', ContentElement)
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 99627ef..e53f4d8 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -14,6 +14,7 @@ export const COLORS = {
   chartColors: ['#f0f9ff', '#bae6fd', '#38bdf8', '#0284c7', '#075985', '#082f49'],
   chartColorsAlternate: ['#fdc5f5', '#f7aef8', '#b388eb', '#8093f1', '#79b8f4', '#72ddf7'],
   offWhite: '#f8fafc',
+  darkBlue: '#083344',
 };
 
 export const CATEGORY_EMOJI = {
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index ac00181..7aade79 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -88,7 +88,7 @@ export const getChartOptions = <T extends keyof ChartTypeRegistry>(
             }),
       },
       tooltip: {
-        boxPadding: 5,
+        padding: 8,
         titleFont: {
           size: 14,
           weight: 'normal',
@@ -96,7 +96,7 @@ export const getChartOptions = <T extends keyof ChartTypeRegistry>(
         bodyFont: {
           size: 14,
         },
-        backgroundColor: 'rgba(15, 43, 42, 0.95)',
+        backgroundColor: COLORS.darkBlue,
         bodyColor: COLORS.offWhite,
         titleColor: COLORS.offWhite,
       },
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 33f49fe..96929f2 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -15,6 +15,10 @@ config.global.components = {
   ContentElement,
 };
 
+config.global.directives = {
+  tippy() {},
+};
+
 const dataTestIdPlugin = (wrapper: ReturnType<typeof mount>) => ({
   findByTestId: (testId: string) => wrapper.find(`[data-test-id='${testId}']`),
   findByText: (selector: string, text: string) =>