Adds element

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start":"node server",
+    "start": "node server",
     "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
@@ -11,6 +11,7 @@
   "dependencies": {
     "connect": "^3.7.0",
     "core-js": "^2.6.5",
+    "element-ui": "^2.11.0",
     "register-service-worker": "^1.6.2",
     "serve-static": "^1.14.1",
     "vue": "^2.6.10",

src/components/Item.vue

@@ -1,5 +1,6 @@
 <template>
-    <div class="item">
+    <el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
+        <div class="item">
         <div class="tile-title" :id="`tile-${id}`">
             <span class="text">{{ title }}</span>
             <div class="overflow-dots">...</div>
@@ -9,10 +10,12 @@
             :src="`/img/tile-icons/${icon}.png`"
             class="tile-icon"
         />
-  </div>
+        </div>
+  </el-tooltip>
 </template>
 
 <script>
+
 export default {
   name: 'Item',
   props: {

src/components/ItemGroup.vue

@@ -11,6 +11,7 @@
                 :key="item.id"
                 :id="item.id"
                 :title="item.title"
+                :description="item.description"
                 :icon="item.icon"
               />
             </div>

src/data/item-data.json

@@ -6,7 +6,7 @@
             {
                 "id":"001",
                 "title": "Server Monitoring",
-                "description": "",
+                "description": "Hello",
                 "provider": "",
                 "icon": "008-clock",
                 "url": ""

src/main.js

@@ -1,8 +1,11 @@
 import Vue from 'vue'
+import Element from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css';
 import App from './App.vue'
 import router from './router'
 import './registerServiceWorker'
 
+Vue.use(Element)
 Vue.config.productionTip = false
 
 new Vue({

src/views/Home.vue

@@ -6,6 +6,7 @@
       <ItemGroup
         v-for="item in items"
         :key="item.id"
+        :id="item.id"
         :title="item.name"
         :items="item.items"
       />