From 2b3d9f27858ab5a6a554a9548ee686e6e12c9f7e Mon Sep 17 00:00:00 2001
From: Sean Corrales <scorrales@gmail.com>
Date: Mon, 28 Oct 2019 08:18:58 -0500
Subject: [PATCH] Display season and skill names on icon hover (#105)

---
 src/components/SeasonIcon.vue | 21 +++++++++++++++++++--
 src/components/SkillIcon.vue  | 21 +++++++++++++++++++--
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/src/components/SeasonIcon.vue b/src/components/SeasonIcon.vue
index 8bc12a5..25d4b50 100644
--- a/src/components/SeasonIcon.vue
+++ b/src/components/SeasonIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="icon">
+  <span class="icon" v-bind:data-season="season.id">
     <spring-icon v-if="season.id === 'spring'"/>
     <summer-icon v-if="season.id === 'summer'"/>
     <fall-icon v-if="season.id === 'fall'"/>
@@ -35,6 +35,23 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+  .icon {
+      position: relative;
+  }
 
+  .icon:hover::after {
+    content: attr(data-season);
+    display: block;
+    position: absolute;
+    bottom: -1.85rem;
+    border-radius: 3px;
+    font-size: .75rem;
+    background-color: #00d1b2;
+    padding: .1rem .3rem;
+    text-transform: capitalize;
+    color: #000;
+    z-index: 100;
+    font-weight: bold;
+  }
 </style>
diff --git a/src/components/SkillIcon.vue b/src/components/SkillIcon.vue
index be9c61d..6e82329 100644
--- a/src/components/SkillIcon.vue
+++ b/src/components/SkillIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <span class="icon">
+  <span class="icon" v-bind:data-skill="skill.id">
       <farming-icon v-if="skill.id === 'farming'"/>
       <mining-icon v-if="skill.id === 'mining'"/>
       <foraging-icon v-if="skill.id === 'foraging'"/>
@@ -38,6 +38,23 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+  .icon {
+      position: relative;
+  }
 
+  .icon:hover::after {
+    content: attr(data-skill);
+    display: block;
+    position: absolute;
+    bottom: -1.85rem;
+    border-radius: 3px;
+    font-size: .75rem;
+    background-color: #209cee;
+    padding: .1rem .3rem;
+    text-transform: capitalize;
+    color: #FFF;
+    z-index: 100;
+    font-weight: bold;
+  }
 </style>