feat: add tooltip component

Signed-off-by: Ryan Wang <i@ryanc.cc>

package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "pinia": "^2.0.13",
+    "tippy.js": "^6.3.7",
     "vue": "^3.2.33",
     "vue-router": "^4.0.14"
   },

pnpm-lock.yaml

@@ -28,6 +28,7 @@ specifiers:
   start-server-and-test: ^1.14.0
   tailwindcss: ^3.0.24
   tailwindcss-themeable: ^1.3.0
+  tippy.js: ^6.3.7
   typescript: ~4.6.3
   unplugin-icons: ^0.14.1
   vite: ^2.9.5
@@ -39,6 +40,7 @@ specifiers:
 
 dependencies:
   pinia: 2.0.13_typescript@4.6.3+vue@3.2.33
+  tippy.js: 6.3.7
   vue: 3.2.33
   vue-router: 4.0.14_vue@3.2.33
 
@@ -620,6 +622,10 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
+  /@popperjs/core/2.11.5:
+    resolution: {integrity: sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==}
+    dev: false
+
   /@rollup/pluginutils/4.2.0:
     resolution: {integrity: sha512-2WUyJNRkyH5p487pGnn4tWAsxhEFKN/pT8CMgHshd5H+IXkOnKvKZwsz5ZWz+YCXkleZRAU5kwbfgF8CPfDRqA==}
     engines: {node: '>= 8.0.0'}
@@ -4460,6 +4466,12 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: true
 
+  /tippy.js/6.3.7:
+    resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
+    dependencies:
+      '@popperjs/core': 2.11.5
+    dev: false
+
   /tmp/0.2.1:
     resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==}
     engines: {node: '>=8.17.0'}

src/components/base/tooltip/Tooltip.story.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { VTooltip } from "@/components/base/tooltip";
+import { VButton } from "@/components/base/button";
+</script>
+<template>
+  <Story title="Tooltip">
+    <template #default>
+      <VTooltip content="Hello Halo">
+        <VButton>Hello</VButton>
+      </VTooltip>
+      <VTooltip content="Hello Halo">
+        <div class="inline-flex">Halo</div>
+      </VTooltip>
+    </template>
+  </Story>
+</template>

src/components/base/tooltip/Tooltip.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
+import { onMounted } from "vue";
+
+const props = defineProps({
+  content: {
+    type: String,
+    default: "",
+  },
+});
+
+onMounted(() => {
+  tippy(".tooltip-wrapper > :first-child", {
+    content: props.content,
+  });
+});
+</script>
+<template>
+  <teleport to="body">
+    <div class="tooltip-wrapper">
+      <slot />
+    </div>
+  </teleport>
+</template>

src/components/base/tooltip/index.ts

@@ -0,0 +1 @@
+export { default as VTooltip } from "./Tooltip.vue";