diff --git a/.node-version b/.node-version
index ef21bea..ef1c2f6 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
-14.x
+16.6.2
\ No newline at end of file
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index c9c0e8e..b52fef6 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -47,6 +47,7 @@ function getComponents() {
     { text: 'Tabs', link: '/components/tabs/tabs.md' },
     { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
     { text: 'Toast', link: 'components/toast/toast.md' },
+    { text: 'Tooltip', link: 'components/tooltip/tooltip.md' },
     { text: 'Modal', link: 'components/modal/modal.md' },
     { text: 'Navbar', link: 'components/navbar/navbar.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..abcb21d 100644
--- a/docs/components/tooltip/examples/TooltipExample.vue
+++ b/docs/components/tooltip/examples/TooltipExample.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="vp-raw flex flex-col">
-    <Tooltip></Tooltip>
-  </div>
+  <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>
+
 <script setup>
-import { Tooltip } from '../../../../src/index'
-</script>
+  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
new file mode 100644
index 0000000..cd7df53
--- /dev/null
+++ b/docs/components/tooltip/examples/TooltipStyleExample.vue
@@ -0,0 +1,32 @@
+<template>
+  <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">
+            Light Tooltip
+        </button>
+      </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 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
new file mode 100644
index 0000000..84160a3
--- /dev/null
+++ b/docs/components/tooltip/examples/TooltipTriggerExample.vue
@@ -0,0 +1,45 @@
+<template>
+  <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>
+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..242bb06 100644
--- a/docs/components/tooltip/tooltip.md
+++ b/docs/components/tooltip/tooltip.md
@@ -1,15 +1,173 @@
 <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>
 # Vue Tooltip Component - Flowbite
 
+## Demo
+
+<TooltipExample></TooltipExample>
+
 ```vue
 <script setup>
 import { Tooltip } from 'flowbite-vue'
 </script>
+
 <template>
-  <Tooltip></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>
 ```
 
-<TooltipExample />
+## 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.
+
+<TooltipStyleExample />
+
+```vue
+<script setup>
+import { Tooltip } from 'flowbite-vue'
+</script>
+
+<!-- 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">
+        Light Tooltip
+    </button>
+  </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>
+```
+
+## 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`.
+
+<TooltipTriggerExample />
+
+```vue
+<script setup>
+import { Tooltip } from 'flowbite-vue'
+</script>
+
+<!-- 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>
+```
diff --git a/package-lock.json b/package-lock.json
index 3313980..b740a0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,12 +5,12 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "flowbite-vue",
       "version": "0.0.7",
       "license": "MIT",
       "dependencies": {
         "@vueuse/core": "9.3.0",
         "classnames": "2.3.2",
+        "floating-vue": "^2.0.0-beta.20",
         "flowbite": "1.5.4",
         "lodash-es": "4.17.21",
         "tailwindcss": "3.2.4"
@@ -377,6 +377,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+      "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+      "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+      "dependencies": {
+        "@floating-ui/core": "^0.3.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -2659,6 +2672,18 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/floating-vue": {
+      "version": "2.0.0-beta.20",
+      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.20.tgz",
+      "integrity": "sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==",
+      "dependencies": {
+        "@floating-ui/dom": "^0.1.10",
+        "vue-resize": "^2.0.0-alpha.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/flowbite": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.4.tgz",
@@ -5973,6 +5998,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-resize": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "0.30.0",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.30.0.tgz",
@@ -6484,6 +6517,19 @@
         "strip-json-comments": "^3.1.1"
       }
     },
+    "@floating-ui/core": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
+      "integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
+    },
+    "@floating-ui/dom": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
+      "integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
+      "requires": {
+        "@floating-ui/core": "^0.3.0"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.7",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.7.tgz",
@@ -8111,6 +8157,15 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "floating-vue": {
+      "version": "2.0.0-beta.20",
+      "resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.20.tgz",
+      "integrity": "sha512-N68otcpp6WwcYC7zP8GeJqNZVdfvS7tEY88lwmuAHeqRgnfWx1Un8enzLxROyVnBDZ3TwUoUdj5IFg+bUT7JeA==",
+      "requires": {
+        "@floating-ui/dom": "^0.1.10",
+        "vue-resize": "^2.0.0-alpha.1"
+      }
+    },
     "flowbite": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.4.tgz",
@@ -10276,6 +10331,12 @@
         }
       }
     },
+    "vue-resize": {
+      "version": "2.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
+      "integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
+      "requires": {}
+    },
     "vue-tsc": {
       "version": "0.30.0",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.30.0.tgz",
diff --git a/package.json b/package.json
index c19f7fa..ce97556 100644
--- a/package.json
+++ b/package.json
@@ -60,6 +60,7 @@
     "vue-tsc": "0.30.0"
   },
   "dependencies": {
+    "floating-vue": "^2.0.0-beta.20",
     "@vueuse/core": "9.3.0",
     "classnames": "2.3.2",
     "flowbite": "1.5.4",
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 1f24255..38e6ba5 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -1,15 +1,78 @@
 <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>
+  <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, 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"
+    },
+    tooltipStyle: {
+      type: String as PropType<TooltipStyle>,
+      default: "tooltip-dark",
+    },
+    trigger: {
+      type: String as PropType<TooltipTrigger>,
+      default: "hover"
+    }
+})
 </script>
+
+<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;
+}
+
+.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
new file mode 100644
index 0000000..7fc6979
--- /dev/null
+++ b/src/components/Tooltip/types.ts
@@ -0,0 +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";
+export type TooltipTrigger   =  "hover" | "click" ;
\ No newline at end of file