Implemented reusable 'this doesn't work yet' tooltip

src/components/Header.vue

@@ -5,14 +5,14 @@
         <router-link tag="a" class="h2 fontWeight-bold" :to="{ name: 'dashboard' }">Quasi</router-link>
 
         <div class="header_period">
-          <div class="arrowWrap">
+          <div class="arrowWrap" @click="showNoFunctionMessageThenHide">
             <div class="arrow arrow-left"></div>
           </div>
           <h6 class="textAlign-center margin-left-4-1 margin-right-4-1">
             <span>Week 6, 2017</span>
             <span class="header_period_date margin-top">Feb 6 – Feb 10</span>
           </h6>
-          <div class="arrowWrap">
+          <div class="arrowWrap" @click="showNoFunctionMessageThenHide">
             <div class="arrow arrow-right"></div>
           </div>
         </div>
@@ -28,9 +28,11 @@
 <script>
   import GridBlock from 'components/GridBlock'
   import firebase from 'firebase'
+  import { showNoFunctionMessageThenHide } from 'utils/showNoFunctionMessageThenHide'
   export default {
     components: { 'grid-block': GridBlock },
     props: { currentUser: { type: Object } },
+    mixins: [showNoFunctionMessageThenHide],
     methods: {
       logout() {
         firebase.auth().signOut().then( () => {
@@ -71,6 +73,7 @@
   }
 
   .arrowWrap {
+    position: relative;
     width: 32px;
     height: 32px;
     background: $color-brandLight;
@@ -79,6 +82,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    cursor: pointer;
   }
 
   .arrow {
@@ -88,7 +92,7 @@
     border-bottom: 6px solid transparent;
     display: inline-block;
 
-    &-right { margin-left: 2px; border-left: 7px solid $color-brandDark-lighter-3; }
-    &-left { margin-right: 2px; border-right: 7px solid $color-brandDark-lighter-3; }
+    &-right { margin-left: 2px; border-left: 7px solid $color-brandDark-lighter-3; pointer-events: none; }
+    &-left { margin-right: 2px; border-right: 7px solid $color-brandDark-lighter-3; pointer-events: none; }
   }
 </style>

src/styles/helpers.scss

@@ -162,6 +162,25 @@ $positions: '-top' '-right' '-bottom' '-left' ''; // One left blank for the clea
 // Lists
 .list-unstyled { list-style-type: none; }
 
+// Message to show when something is not implemented yet
+.showNoFunctionMessage {
+	&:after {
+		content: 'Not functional yet';
+		position: absolute;
+		top: 80%;
+		text-align: right;
+		background-color: $color-brandDark;
+		color: $color-brandLight;
+		border-radius: 2px;
+		white-space: nowrap;
+		padding: $scale-1-2 $scale;
+		font-family: $fontFamily-sans;
+		font-weight: bold;
+		font-size: 8px;
+		text-transform: uppercase;
+	}
+}
+
 // Animation
 .fadeIn 					{ animation: fadeIn 1.2s $animationBezier forwards; }
 .fadeOut 					{ animation: fadeOut 1.2s $animationBezier forwards; }

src/utils/showNoFunctionMessageThenHide.js

@@ -0,0 +1,10 @@
+export const showNoFunctionMessageThenHide = {
+  methods: {
+    showNoFunctionMessageThenHide(e) {
+      const targetClassesInitial = e.target.className
+      const targetClassesNew = e.target.className += ' showNoFunctionMessage'
+      e.target.className = targetClassesNew
+      setTimeout( () => { e.target.className = targetClassesInitial }, 1000)
+    }
+  }
+}

webpack.config.js

@@ -51,7 +51,8 @@ module.exports = {
       components: path.resolve(__dirname, 'src/components'),
       routes: path.resolve(__dirname, 'src/routes'),
       store: path.resolve(__dirname, 'src/store'),
-      styles: path.resolve(__dirname, 'src/styles')
+      styles: path.resolve(__dirname, 'src/styles'),
+      utils: path.resolve(__dirname, 'src/utils'),
     },
     extensions: ['.js', '.vue', '.scss']
   },