From 66aa000808d9e17c929ae04e7a7e36e188bb7a2e Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Sun, 16 Oct 2022 23:06:02 +0900
Subject: [PATCH] feature/add_tooltip_component

---
 .node-version                                 |   1 +
 docs/.vitepress/config.ts                     |   2 +-
 .../tooltip/examples/TooltipExample.vue       |  32 ++-
 .../tooltip/examples/TooltipStyleExample.vue  |  34 +++
 .../examples/TooltipTriggerExample.vue        |  36 +++
 docs/components/tooltip/tooltip.md            | 254 +++++++++++++++++-
 package.json                                  |   7 +-
 src/components/Tooltip/Tooltip.vue            |  53 +++-
 src/components/Tooltip/types.ts               |   2 +
 9 files changed, 402 insertions(+), 19 deletions(-)
 create mode 100644 .node-version
 create mode 100644 docs/components/tooltip/examples/TooltipStyleExample.vue
 create mode 100644 docs/components/tooltip/examples/TooltipTriggerExample.vue
 create mode 100644 src/components/Tooltip/types.ts

diff --git a/.node-version b/.node-version
new file mode 100644
index 0000000..357607e
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+16.6.2
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 6ec6c3a..476dfae 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -47,6 +47,7 @@ function getComponents() {
     { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
     { text: 'Toast', link: 'components/toast/toast.md' },
     { text: 'Modal', link: 'components/modal/modal.md' },
+    { text: 'Tooltip', link: 'components/tooltip/tooltip.md' },
 
     { text: '- Accordion', link: 'components/accordion/accordion.md' },
     { text: '- Carousel', link: 'components/carousel/carousel.md' },
@@ -58,7 +59,6 @@ function getComponents() {
     { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
     { text: '- Table', link: 'components/table/table.md' },
     { text: '- Timeline', link: 'components/timeline/timeline.md' },
-    { text: '- Tooltip', link: 'components/tooltip/tooltip.md' },
   ]
 }
 
diff --git a/docs/components/tooltip/examples/TooltipExample.vue b/docs/components/tooltip/examples/TooltipExample.vue
index 76b75c3..ab2fbe4 100644
--- a/docs/components/tooltip/examples/TooltipExample.vue
+++ b/docs/components/tooltip/examples/TooltipExample.vue
@@ -1,8 +1,32 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Tooltip></Tooltip>
-  </div>
+  <Tooltip :placement="placement" hover arrow>
+
+    <template #trigger>
+      <button type="button"
+            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          <slot name="trigger-text"></slot>
+      </button>
+    </template>
+
+    <template #content>
+      <div
+      class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+          <slot name="content-text"></slot>
+      </div>
+    </template>
+
+  </Tooltip>
 </template>
-<script setup>
+
+<script lang="ts" setup>
 import { Tooltip } from '../../../../src/index'
+import type { PropType } from 'vue'
+import type { TooltipPlacement } from '../../../../src/components/Tooltip/types'
+
+const props = defineProps({
+placement: {
+  type: String as PropType<TooltipPlacement>,
+  default: 'top'
+}
+})
 </script>
diff --git a/docs/components/tooltip/examples/TooltipStyleExample.vue b/docs/components/tooltip/examples/TooltipStyleExample.vue
new file mode 100644
index 0000000..fdaf066
--- /dev/null
+++ b/docs/components/tooltip/examples/TooltipStyleExample.vue
@@ -0,0 +1,34 @@
+<template>
+  <Tooltip :placement="placement" :class="colorStyle" hover arrow>
+
+    <template #trigger>
+      <button type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+            <slot name="trigger-text"></slot>
+        </button>
+    </template>
+
+    <template #content>
+      <slot name="tooltip"></slot>
+    </template>
+
+  </Tooltip>
+</template>
+
+<script lang="ts" setup>
+import { Tooltip } from '../../../../src/index'
+import type { PropType } from 'vue'
+import type { TooltipPlacement, TooltipStyle } from '../../../../src/components/Tooltip/types'
+
+const props = defineProps({
+placement: {
+  type: String as PropType<TooltipPlacement>,
+  default: 'top'
+},
+colorStyle: {
+  type: String  as PropType<TooltipStyle>,
+  default: "tooltip-dark",
+}
+
+})
+</script>
diff --git a/docs/components/tooltip/examples/TooltipTriggerExample.vue b/docs/components/tooltip/examples/TooltipTriggerExample.vue
new file mode 100644
index 0000000..1edbcf7
--- /dev/null
+++ b/docs/components/tooltip/examples/TooltipTriggerExample.vue
@@ -0,0 +1,36 @@
+<template>
+  <Tooltip :placement="placement" click arrow>
+
+    <template #trigger>
+      <button type="button"
+            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          <slot name="trigger-text"></slot>
+      </button>
+    </template>
+
+    <template #content>
+      <div
+      class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+          <slot name="content-text"></slot>
+      </div>
+    </template>
+
+  </Tooltip>
+</template>
+
+<script lang="ts" setup>
+import { Tooltip } from '../../../../src/index'
+import type { PropType } from 'vue'
+import type { TooltipPlacement } from '../../../../src/components/Tooltip/types'
+
+const props = defineProps({
+placement: {
+  type: String as PropType<TooltipPlacement>,
+  default: 'top'
+},
+arrowColor: {
+    type: String,
+    default: "#0f172a",
+}
+})
+</script>
diff --git a/docs/components/tooltip/tooltip.md b/docs/components/tooltip/tooltip.md
index 608372b..a733135 100644
--- a/docs/components/tooltip/tooltip.md
+++ b/docs/components/tooltip/tooltip.md
@@ -1,15 +1,265 @@
 <script setup>
 import TooltipExample from './examples/TooltipExample.vue'
+import TooltipStyleExample from './examples/TooltipStyleExample.vue'
+import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
 </script>
 # Vue Tooltip Component - Flowbite
 
+## Demo
+
+<TooltipExample>
+    <template #trigger-text>Demo Tooltip</template>
+    <template #content-text>Demo Content</template>
+</TooltipExample>
+
 ```vue
 <script setup>
 import { Tooltip } from 'flowbite-vue'
 </script>
+
 <template>
-  <Tooltip></Tooltip>
+  <Tooltip hover arrow>
+      <template #trigger>
+        <button type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          Demo tooltip
+        </button>
+      </template>
+      <template #content>
+        <div
+        class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+          Demo content
+        </div>
+      </template>
+    </Tooltip>
 </template>
 ```
 
-<TooltipExample />
+## Placement
+
+The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using placement attribute with `top`, `top-start` , `top-end`, `bottom`, `bottom-start`, `bottom-end`, `right`, `right-start`, `right-end`, `left`, `left-start`, `left-end`, `auto`, `auto-start`,  `auto-end`.  
+The default value is: `top`
+
+<div class="flex flex-wrap justify-center py-8 space-x-3">
+  <TooltipExample placement="top">
+    <template #trigger-text>Tooltip top</template>
+    <template #content-text>Tooltip top</template>
+  </TooltipExample> 
+
+  <TooltipExample placement="right">
+    <template #trigger-text>Tooltip right</template>
+    <template #content-text>Tooltip on right</template>
+  </TooltipExample> 
+
+  <TooltipExample placement="bottom">
+    <template #trigger-text>Tooltip bottom</template>
+    <template #content-text>Tooltip on bottom</template>
+  </TooltipExample> 
+
+  <TooltipExample placement="left">
+    <template #trigger-text>Tooltip left</template>
+    <template #content-text>Tooltip on left</template>
+  </TooltipExample> 
+  
+</div>
+
+```vue
+<script setup>
+import { Tooltip } from 'flowbite-vue'
+</script>
+
+<template>
+  <!-- Show tooltip on top -->
+  <Tooltip placement="top" hover arrow>
+      <template #trigger>
+        <button type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          Tooltip top
+        </button>
+      </template>
+      <template #content>
+        <div
+        class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+          Tooltip on top
+        </div>
+      </template>
+    </Tooltip>
+
+    <!-- Show tooltip on right -->
+  <Tooltip placement="right" hover arrow>
+      <template #trigger>
+        <button type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          Tooltip right
+        </button>
+      </template>
+      <template #content>
+        <div
+        class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+          Tooltip on right
+        </div>
+      </template>
+    </Tooltip>
+
+    <!-- Show tooltip on bottom -->
+  <Tooltip placement="bottom" hover arrow>
+      <template #trigger>
+        <button type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          Tooltip bottom
+        </button>
+      </template>
+      <template #content>
+        <div
+        class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+          Tooltip on bottom
+        </div>
+      </template>
+    </Tooltip>
+
+  <!-- Show tooltip on left -->
+  <Tooltip placement="left" hover arrow>
+      <template #trigger>
+        <button type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          Tooltip left
+        </button>
+      </template>
+      <template #content>
+        <div
+        class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+          Tooltip left
+        </div>
+      </template>
+    </Tooltip>
+</template>
+```
+
+## Tooltip styles
+
+You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `tooltip-light` or `tooltip-dark` attribute.
+
+<div class="flex flex-wrap justify-center py-8 space-x-3">
+  <TooltipStyleExample placement="top" arrow-color="yellow" colorStyle="tooltip-light">
+    <template #trigger-text>
+        light style tooltip
+    </template>
+    <template #tooltip>
+        <div
+        class="py-2 px-3 text-sm font-medium rounded-lg shadow-sm transition-opacity duration-300">
+            light style content
+        </div>
+    </template>
+  </TooltipStyleExample> 
+
+  <TooltipStyleExample placement="top" arrow-color="yellow" colorStyle="tooltip-dark">
+    <template #trigger-text>
+        dark style tooltip
+    </template>
+    <template #tooltip>
+        <div
+          class="py-2 px-3 text-sm font-medium text-white rounded-lg shadow-sm transition-opacity duration-300">
+            dark style Tooltip
+          </div>
+    </template>
+  </TooltipStyleExample> 
+</div>
+
+```vue
+<script setup>
+import { Tooltip } from 'flowbite-vue'
+</script>
+
+<!-- light style tooltip -->
+<Tooltip class="tooltip-light" hover arrow>
+  <template #trigger>
+    <button type="button"
+             class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+            light style tooltip
+    </button>
+  </template>
+
+  <template #content>
+    <div
+      class="py-2 px-3 text-sm font-medium rounded-lg shadow-sm transition-opacity duration-300">
+      light style content
+      </div>
+  </template>
+</Tooltip>
+
+<!-- dark style tooltip -->
+<Tooltip class="tooltip-dark" hover arrow>
+  <template #trigger>
+    <button type="button"
+             class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+            dark style tooltip
+    </button>
+  </template>
+
+  <template #content>
+    <div
+      class="py-2 px-3 text-sm font-medium text-white rounded-lg shadow-sm transition-opacity duration-300">
+      dark style content
+      </div>
+  </template>
+</Tooltip>
+```
+
+## triggerType
+
+You can choose the triggering event by using the `hover` or `click` attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to `click`.
+
+<div class="flex flex-wrap justify-center py-8 space-x-3">
+  <TooltipExample>
+      <template #trigger-text>Tooltip Hover</template>
+      <template #content-text>Tooltip Content</template>
+  </TooltipExample>
+
+  <TooltipTriggerExample>
+      <template #trigger-text>Tooltip click</template>
+      <template #content-text>Tooltip Content</template>
+  </TooltipTriggerExample>
+</div>
+
+
+```vue
+<script setup>
+import { Tooltip } from 'flowbite-vue'
+</script>
+
+<!-- light style tooltip -->
+<template>
+  <Tooltip hover arrow>
+      <template #trigger>
+        <button type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          Tooltip Hover
+        </button>
+      </template>
+      <template #content>
+        <div
+        class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+          Tooltip Content
+        </div>
+      </template>
+    </Tooltip>
+</template>
+
+<!-- light style tooltip -->
+<template>
+  <Tooltip click arrow>
+      <template #trigger>
+        <button type="button"
+              class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
+          Tooltip click
+        </button>
+      </template>
+      <template #content>
+        <div
+        class="py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 dark:bg-gray-700">
+          Tooltip Content
+        </div>
+      </template>
+    </Tooltip>
+</template>
+```
diff --git a/package.json b/package.json
index d125f2d..33d7f11 100644
--- a/package.json
+++ b/package.json
@@ -32,8 +32,8 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "peerDependencies": {
-    "vue": "^3",
-    "tailwindcss": "^3"
+    "tailwindcss": "^3",
+    "vue": "^3"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.182",
@@ -65,6 +65,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^8.9.1",
-    "vitepress": "^1.0.0-alpha.4"
+    "vitepress": "^1.0.0-alpha.4",
+    "vue3-popper": "^1.5.0"
   }
 }
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 1f24255..7fd86a7 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -1,15 +1,50 @@
 <template>
   <div>
-    <button data-tooltip-target="tooltip-default" type="button"
-            class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-      Default tooltip
-    </button>
-    <div id="tooltip-default" role="tooltip"
-         class="inline-block absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 tooltip dark:bg-gray-700">
-      Tooltip content
-      <div class="tooltip-arrow" data-popper-arrow></div>
-    </div>
+      <Popper :class="colorStyle"  v-bind="$attrs" :placement="placement"> 
+        <slot name="trigger"></slot>
+
+        <template #content>
+          <slot name="content"></slot>
+        </template>
+      </Popper>
   </div>
 </template>
+
 <script lang="ts" setup>
+import type { PropType } from 'vue'
+import type { TooltipPlacement, TooltipStyle } from './types'
+import Popper from "vue3-popper";
+
+const props = defineProps({
+    placement: {
+      type: String as PropType<TooltipPlacement>,
+      default: "top"
+    },
+    colorStyle: {
+      type: String  as PropType<TooltipStyle>,
+      default: "tooltip-dark",
+    }
+})
 </script>
+
+<style scoped>
+  .tooltip-dark {
+  --popper-theme-background-color: #0f172a;
+  --popper-theme-background-color-hover: #0f172a;
+  --popper-theme-text-color: white;
+  --popper-theme-border-width: 0px;
+  --popper-theme-border-radius: 6px;
+  --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+}
+
+.tooltip-light {
+  --popper-theme-background-color: #ffffff;
+  --popper-theme-background-color-hover: #ffffff;
+  --popper-theme-text-color: #333333;
+  --popper-theme-border-width: 1px;
+  --popper-theme-border-style: solid;
+  --popper-theme-border-color: #eeeeee;
+  --popper-theme-border-radius: 6px;
+  --popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
+}
+</style>
diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
new file mode 100644
index 0000000..849702d
--- /dev/null
+++ b/src/components/Tooltip/types.ts
@@ -0,0 +1,2 @@
+export type TooltipPlacement = "auto" | "auto-start" | "auto-end" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | undefined;
+export type TooltipStyle = "tooltip-dark" | "tooltip-light";
\ No newline at end of file