feature/add_tooltip_component

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>