From 9ed0804ceaf2b46cfa6497b8e2cccaaacdacf86c Mon Sep 17 00:00:00 2001
From: hirakei1203 <hirano.keitaro.64x@gmail.com>
Date: Thu, 24 Nov 2022 23:57:27 +0900
Subject: [PATCH] replace popper to floating-vue

---
 .../tooltip/examples/TooltipExample.vue       |  27 +-
 .../examples/TooltipPositionExample.vue       |  56 +++
 .../tooltip/examples/TooltipStyleExample.vue  |  56 ++-
 .../examples/TooltipTriggerExample.vue        |  43 ++-
 docs/components/tooltip/tooltip.md            | 320 +++++++-----------
 package.json                                  |   4 +-
 src/components/Tooltip/Tooltip.vue            |  86 +++--
 src/components/Tooltip/types.ts               |   3 +-
 8 files changed, 290 insertions(+), 305 deletions(-)
 create mode 100644 docs/components/tooltip/examples/TooltipPositionExample.vue

diff --git a/docs/components/tooltip/examples/TooltipExample.vue b/docs/components/tooltip/examples/TooltipExample.vue
index ab2fbe4..abcb21d 100644
--- a/docs/components/tooltip/examples/TooltipExample.vue
+++ b/docs/components/tooltip/examples/TooltipExample.vue
@@ -1,32 +1,17 @@
 <template>
-  <Tooltip :placement="placement" hover arrow>
-
+  <Tooltip>
     <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>
+          Default 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">
-          <slot name="content-text"></slot>
-      </div>
+      Tooltip content
     </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'
-}
-})
-</script>
+<script setup>
+  import { Tooltip } from '../../../../src/index'
+</script>
\ No newline at end of file
diff --git a/docs/components/tooltip/examples/TooltipPositionExample.vue b/docs/components/tooltip/examples/TooltipPositionExample.vue
new file mode 100644
index 0000000..2bb0c8a
--- /dev/null
+++ b/docs/components/tooltip/examples/TooltipPositionExample.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="flex flex-wrap justify-center py-8 space-x-3">
+    <!-- Show tooltip on top -->
+    <Tooltip placement="top">
+      <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>
+        Tooltip on top
+      </template>
+    </Tooltip>
+    <!-- Show tooltip on right -->
+    <Tooltip placement="right">
+      <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>
+        Tooltip on right
+      </template>
+    </Tooltip>
+    <!-- Show tooltip on bottom -->
+    <Tooltip placement="bottom">
+      <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>
+        Tooltip on bottom
+      </template>
+    </Tooltip>
+    <!-- Show tooltip on left -->
+    <Tooltip placement="left">
+      <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>
+        Tooltip on left
+      </template>
+    </Tooltip>
+  </div>
+</template>
+
+<script setup>
+  import { Tooltip } from '../../../../src/index'
+</script>
\ No newline at end of file
diff --git a/docs/components/tooltip/examples/TooltipStyleExample.vue b/docs/components/tooltip/examples/TooltipStyleExample.vue
index fdaf066..cd7df53 100644
--- a/docs/components/tooltip/examples/TooltipStyleExample.vue
+++ b/docs/components/tooltip/examples/TooltipStyleExample.vue
@@ -1,34 +1,32 @@
 <template>
-  <Tooltip :placement="placement" :class="colorStyle" hover arrow>
-
-    <template #trigger>
-      <button type="button"
+  <div class="flex flex-wrap justify-center py-8 space-x-3">
+    <!-- light style tooltip -->
+    <Tooltip tooltip-style="tooltip-light">
+      <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>
+            Light Tooltip
         </button>
-    </template>
-
-    <template #content>
-      <slot name="tooltip"></slot>
-    </template>
-
-  </Tooltip>
+      </template>
+      <template #content>
+        Tooltip content
+      </template>
+    </Tooltip>
+    <!-- dark style tooltip -->
+    <Tooltip tooltip-style="tooltip-dark">
+      <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 Tooltip
+        </button>
+      </template>
+      <template #content>
+        Tooltip content
+      </template>
+    </Tooltip>
+  </div>
 </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>
+<script setup>
+  import { Tooltip } from '../../../../src/index'
+</script>
\ No newline at end of file
diff --git a/docs/components/tooltip/examples/TooltipTriggerExample.vue b/docs/components/tooltip/examples/TooltipTriggerExample.vue
index 1edbcf7..84160a3 100644
--- a/docs/components/tooltip/examples/TooltipTriggerExample.vue
+++ b/docs/components/tooltip/examples/TooltipTriggerExample.vue
@@ -1,21 +1,30 @@
 <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>
+  <div class="flex flex-wrap justify-center py-8 space-x-3">
+    <!-- Show tooltip on hover -->
+    <Tooltip trigger="hover">
+      <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>
+        Tooltip content
+      </template>
+    </Tooltip>
+    <!-- Show tooltip on click -->
+    <Tooltip trigger="click">
+      <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>
+        Tooltip content
+      </template>
+    </Tooltip>
+  </div>
 </template>
 
 <script lang="ts" setup>
diff --git a/docs/components/tooltip/tooltip.md b/docs/components/tooltip/tooltip.md
index a733135..242bb06 100644
--- a/docs/components/tooltip/tooltip.md
+++ b/docs/components/tooltip/tooltip.md
@@ -1,5 +1,6 @@
 <script setup>
 import TooltipExample from './examples/TooltipExample.vue'
+import TooltipPositionExample from './examples/TooltipPositionExample.vue'
 import TooltipStyleExample from './examples/TooltipStyleExample.vue'
 import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
 </script>
@@ -7,10 +8,7 @@ import TooltipTriggerExample from './examples/TooltipTriggerExample.vue'
 
 ## Demo
 
-<TooltipExample>
-    <template #trigger-text>Demo Tooltip</template>
-    <template #content-text>Demo Content</template>
-</TooltipExample>
+<TooltipExample></TooltipExample>
 
 ```vue
 <script setup>
@@ -18,120 +16,17 @@ import { Tooltip } from 'flowbite-vue'
 </script>
 
 <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">
-          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>
-```
-
-## 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>
+  <Tooltip>
+    <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">
+          Default Tooltip
+      </button>
+    </template>
+    <template #content>
+      Tooltip content
+    </template>
+  </Tooltip>
 </template>
 ```
 
@@ -139,31 +34,7 @@ import { Tooltip } from 'flowbite-vue'
 
 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>
+<TooltipStyleExample />
 
 ```vue
 <script setup>
@@ -171,95 +42,132 @@ import { Tooltip } from 'flowbite-vue'
 </script>
 
 <!-- light style tooltip -->
-<Tooltip class="tooltip-light" hover arrow>
+<Tooltip tooltip-style="tooltip-light">
   <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
+          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 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>
+    Tooltip content
   </template>
 </Tooltip>
-
 <!-- dark style tooltip -->
-<Tooltip class="tooltip-dark" hover arrow>
+<Tooltip tooltip-style="tooltip-dark">
   <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
+          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 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>
+    Tooltip content
   </template>
 </Tooltip>
 ```
 
+## 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`
+
+<TooltipPositionExample />
+
+```vue
+<script setup>
+import { Tooltip } from 'flowbite-vue'
+</script>
+
+<template>
+<!-- Show tooltip on top -->
+<Tooltip placement="top">
+  <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>
+    Tooltip on top
+  </template>
+</Tooltip>
+
+<!-- Show tooltip on right -->
+<Tooltip placement="right">
+  <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>
+    Tooltip on right
+  </template>
+</Tooltip>
+
+<!-- Show tooltip on bottom -->
+<Tooltip placement="bottom">
+  <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>
+    Tooltip on bottom
+  </template>
+</Tooltip>
+
+<!-- Show tooltip on left -->
+<Tooltip placement="left">
+  <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>
+    Tooltip on left
+  </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>
-
+<TooltipTriggerExample />
 
 ```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">
+<!-- Show tooltip on hover -->
+<Tooltip trigger="hover">
+  <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>
+    Tooltip content
+  </template>
+</Tooltip>
+<!-- Show tooltip on click -->
+<Tooltip trigger="click">
+  <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>
+    </button>
+  </template>
+  <template #content>
+    Tooltip content
+  </template>
+</Tooltip>
 ```
diff --git a/package.json b/package.json
index 33d7f11..98a6aef 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^8.9.1",
-    "vitepress": "^1.0.0-alpha.4",
-    "vue3-popper": "^1.5.0"
+    "floating-vue": "^2.0.0-beta.20",
+    "vitepress": "^1.0.0-alpha.4"
   }
 }
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 7fd86a7..38e6ba5 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -1,50 +1,78 @@
 <template>
-  <div>
-      <Popper :class="colorStyle"  v-bind="$attrs" :placement="placement"> 
-        <slot name="trigger"></slot>
-
-        <template #content>
-          <slot name="content"></slot>
-        </template>
-      </Popper>
+  <div class="flex items-start">
+    <TooltipComponent :placement="placement" :triggers="[trigger]" :theme="tooltipStyle">
+      <slot name="trigger"></slot>
+      <template #popper>
+        <slot name="content"></slot>
+      </template>
+    </TooltipComponent>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { PropType } from 'vue'
-import type { TooltipPlacement, TooltipStyle } from './types'
-import Popper from "vue3-popper";
+import type { TooltipPlacement, TooltipStyle, TooltipTrigger } from './types'
+import { Tooltip as TooltipComponent } from 'floating-vue'
+import 'floating-vue/dist/style.css'
 
 const props = defineProps({
     placement: {
       type: String as PropType<TooltipPlacement>,
       default: "top"
     },
-    colorStyle: {
-      type: String  as PropType<TooltipStyle>,
+    tooltipStyle: {
+      type: String as PropType<TooltipStyle>,
       default: "tooltip-dark",
+    },
+    trigger: {
+      type: String as PropType<TooltipTrigger>,
+      default: "hover"
     }
 })
 </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);
+<style>
+.v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner {
+  background: rgba(0,0,0);
+  color: #fff;
+  border-radius: 6px;
+  padding: 7px 12px 6px;
 }
 
-.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);
+.v-popper--theme-tooltip-dark .v-popper__arrow-inner {
+  visibility: hidden;
 }
+
+.v-popper--theme-tooltip-dark .v-popper__arrow-outer {
+  border-color: #000c;
+}
+
+@media (prefers-color-scheme: dark) {
+  .v-popper--theme-tooltip-dark .v-popper__wrapper .v-popper__inner {
+    background: rgb(55 65 81);
+  }
+
+  .v-popper--theme-tooltip-dark .v-popper__arrow-outer {
+    border-color: rgb(55 65 81);
+  }
+}
+
+.v-popper--theme-tooltip-light .v-popper__wrapper .v-popper__inner {
+  background: #fff;
+  color: black;
+  padding: 7px 12px 6px;
+  border-radius: 6px;
+  border: 1px solid #eeeeee;
+  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
+}
+
+.v-popper--theme-tooltip-light .v-popper__arrow-inner {
+  visibility: visible;
+  border-color: #fff;
+}
+
+.v-popper--theme-tooltip-light .v-popper__arrow-outer {
+  border-color: #ddd;
+}
+
 </style>
diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts
index 849702d..7fc6979 100644
--- a/src/components/Tooltip/types.ts
+++ b/src/components/Tooltip/types.ts
@@ -1,2 +1,3 @@
 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
+export type TooltipStyle     = "tooltip-dark" | "tooltip-light";
+export type TooltipTrigger   =  "hover" | "click" ;
\ No newline at end of file