v-tooltip 플러그인 + tooltip 컴포넌트 + nuxt.config > 툽팁 사용예

components/CourseCardTooltip.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="card card-tooltip">
+    <div class="card-content">
+      <div class="media">
+        <div class="media-content">
+          <!-- TODO: Course Title -->
+          <p class="title is-4">{{title}}</p>
+          <!-- TODO: Course Subtitle -->
+          <p class="subtitle is-6"><i>{{subtitle}}</i></p>
+        </div>
+      </div>
+
+      <!-- TODO: Course Description -->
+      <div class="content">
+        {{description}}
+      </div>
+      <div class="content">
+        <ul class="wsl-list">
+          <!-- TODO: Iterate wsl -->
+          <li
+            v-for="item in wsl"
+            :key="item.value"
+            class="wsl-item">
+            {{item.value}}
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: { required: false, type: String },
+    subtitle: { required: false, type: String },
+    description: { required: false, type: String },
+    wsl: { required: false, type: Array }
+  }
+}
+</script>
+<style scoped lang="scss">
+  .card-tooltip {
+    max-width: 350px;
+    .title {
+      font-size: 18px;
+    }
+    .wsl-list {
+      margin-left: 13px;
+      .wsl-item {
+        font-size: 13px;
+      }
+    }
+  }
+</style>

nuxt.config.js

@@ -36,6 +36,7 @@ module.exports = {
     {src: '~/plugins/vuelidate'},
     {src: '~/plugins/integrations'},
     {src: '~/plugins/components'},
+    {src: '~/plugins/tooltip'},
     {src: '~/plugins/toasted', ssr: false},
     {src: '~/plugins/paginate', ssr: false}
   ],

package-lock.json

@@ -7011,6 +7011,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7670,6 +7671,11 @@
         "find-up": "^3.0.0"
       }
     },
+    "popper.js": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz",
+      "integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw=="
+    },
     "portal-vue": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.6.tgz",
@@ -10914,6 +10920,16 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz",
       "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA=="
     },
+    "v-tooltip": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/v-tooltip/-/v-tooltip-2.0.2.tgz",
+      "integrity": "sha512-xQ+qzOFfywkLdjHknRPgMMupQNS8yJtf9Utd5Dxiu/0n4HtrxqsgDtN2MLZ0LKbburtSAQgyypuE/snM8bBZhw==",
+      "requires": {
+        "lodash": "^4.17.11",
+        "popper.js": "^1.15.0",
+        "vue-resize": "^0.4.5"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -10988,6 +11004,11 @@
       "resolved": "https://registry.npmjs.org/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz",
       "integrity": "sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g=="
     },
+    "vue-resize": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
+      "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
+    },
     "vue-router": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.7.tgz",
@@ -11331,7 +11352,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -11351,8 +11371,7 @@
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.3.5",
@@ -11373,7 +11392,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -11446,8 +11464,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -11532,8 +11549,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -11563,7 +11579,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -11581,7 +11596,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }

package.json

@@ -32,6 +32,7 @@
     "slugify": "^1.3.4",
     "tiptap": "1.23.0",
     "tiptap-extensions": "1.26.1",
+    "v-tooltip": "^2.0.2",
     "vue-toasted": "^1.1.27",
     "vuejs-paginate": "^2.1.0",
     "vuelidate": "^0.7.4"

pages/index.vue

@@ -17,7 +17,20 @@
             :key="course._id"
             class="column is-one-quarter">
             <!-- CARD-ITEM -->
-            <CourseCard :course="course"/>
+            <v-popover
+              offset="16"
+              trigger="hover"
+              placement="right-start">
+              <course-card :course="course"/>
+              <template slot="popover">
+                <course-card-tooltip
+                  :title="course.title"
+                  :subtitle="course.category.name"
+                  :description="course.subtitle"
+                  :wsl="course.wsl"
+                />
+              </template>
+            </v-popover>
             <!-- CARD-ITEM-END -->
           </div>
         </div>
@@ -44,11 +57,12 @@
 
 import Hero from "~/components/shared/Hero";
 import CourseCard from "~/components/CourseCard";
+import CourseCardTooltip from '~/components/CourseCardTooltip'
 import BlogCard from "~/components/BlogCard";
 import {mapState} from "vuex"
 export default {
   components: {
-    Hero, CourseCard, BlogCard
+    Hero, CourseCard, BlogCard,CourseCardTooltip
   },
   computed : {
     ...mapState({

plugins/tooltip.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VTooltip from 'v-tooltip'
+
+Vue.use(VTooltip)