platform tooltips

Author: Beelink

_v2/moduleart-website/README.md

@@ -19,6 +19,3 @@ yarn build
 ```
 yarn lint
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).

_v2/moduleart-website/src/components/ProjectList/ProjectList.scss

@@ -21,9 +21,11 @@
       color: $light-color;
     }
 
-    img {
-      margin-right: 4px;
-    }
+    
+  }
+
+  &__platform {
+    display: inline;
   }
 
   &__image {

_v2/moduleart-website/src/components/ProjectList/ProjectList.vue

@@ -5,13 +5,10 @@
         <a :href="project.url">
           <span>{{ project.title }}</span>
           <span class="light"> for </span>
-          <img 
-            v-for="(platform, platformIndex) in project.platforms"
-            :key="platformIndex"
-            :src="getPlatformImage(platform)" 
-            :alt="platform"
-            :title="platform"
-          /></a>
+          <tooltip class="project__platform" v-for="(platform, platformIndex) in project.platforms" :key="platformIndex" :text="platform">
+            <img :src="getPlatformImage(platform)" :alt="platform" />
+          </tooltip>
+        </a>
       </h2>
       <a class="project__image">
         <img v-if="project.image" :src="getProjectImage(project.image)" :alt="project.title" />
@@ -21,8 +18,13 @@
 </template>
 
 <script>
+import Tooltip from "../Tooltip/Tooltip.vue";
+
 export default {
   name: "ProjectList",
+  components: {
+    Tooltip,
+  },
   data() {
     return {
       projects: [

_v2/moduleart-website/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,40 @@
+@import "../../assets/styles/variables.scss";
+
+.tooltip {
+  position: relative;
+
+  &:hover {
+    .tooltip__text {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+  }
+
+  &__text {
+    position: absolute;
+    background: $text-color;
+    color: $light-color;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 17px;
+    line-height: 17px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-8px);
+    pointer-events: none;
+    top: calc(-100% - 8px);
+    opacity: 0;
+    transition: opacity .25s, transform .25s;
+
+    &::before {
+      content: "";
+      width: 0; 
+      height: 0; 
+      top: 100%;
+      left: calc(50% - 8px);
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid $text-color;
+      position: absolute;
+    }
+  }
+}

_v2/moduleart-website/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="tooltip">
+    <slot />
+    <span class="tooltip__text">{{ computedText }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tooltip",
+  props: {
+    text: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    computedText() {
+      return this.text;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "./Tooltip.scss";
+</style>