diff --git a/src/components/Select/WSelect.spec.ts b/src/components/Select/WSelect.spec.ts
index 2ca7ec1..75104af 100644
--- a/src/components/Select/WSelect.spec.ts
+++ b/src/components/Select/WSelect.spec.ts
@@ -1,12 +1,12 @@
 import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import WSelect from './WSelect.vue'
 import { DropdownPosition } from './WSelect'
 import Icon from '@/assets/svg/navigation-cursor.svg?component'
 
 describe('WSelect', () => {
   it('renders properly', () => {
-    const wrapper = mount(WSelect, {
+    const wrapper = shallowMount(WSelect, {
       emits: ['update:modelValue'],
       props: {
         dropdownPosition: DropdownPosition.bottom,
@@ -33,7 +33,7 @@ describe('WSelect', () => {
   })
 
   it('renders properly an icon when provided', () => {
-    const wrapper = mount(WSelect, {
+    const wrapper = shallowMount(WSelect, {
       emits: ['update:modelValue'],
       props: {
         dropdownPosition: DropdownPosition.bottom,
diff --git a/src/components/Select/__snapshots__/WSelect.spec.ts.snap b/src/components/Select/__snapshots__/WSelect.spec.ts.snap
index 81f9184..8611945 100644
--- a/src/components/Select/__snapshots__/WSelect.spec.ts.snap
+++ b/src/components/Select/__snapshots__/WSelect.spec.ts.snap
@@ -1,215 +1,85 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`WSelect > renders properly 1`] = `
-<div
-  class="v-select vs--single vs--unsearchable language-selector"
+<anonymous-stub
+  appendtobody="false"
+  autocomplete="off"
+  calculateposition="[Function]"
+  class="language-selector"
+  clearable="false"
+  clearsearchonblur="[Function]"
+  clearsearchonselect="true"
+  closeonselect="true"
+  components="[object Object]"
+  createoption="[Function]"
+  deselectfromdropdown="false"
   dir="auto"
->
-  
-  
-  <div
-    aria-expanded="false"
-    aria-label="Search for option"
-    aria-owns="vs1__listbox"
-    class="vs__dropdown-toggle"
-    id="vs1__combobox"
-    role="combobox"
-  >
-    <div
-      class="vs__selected-options"
-    >
-      
-      
-      <span
-        class="vs__selected"
-      >
-        <!--v-if-->
-         English
-      </span>
-      
-      
-      
-      <input
-        aria-autocomplete="list"
-        aria-controls="vs1__listbox"
-        aria-labelledby="vs1__combobox"
-        autocomplete="off"
-        class="vs__search"
-        readonly=""
-        type="search"
-        value=""
-      />
-      
-    </div>
-    <div
-      class="vs__actions"
-    >
-      <button
-        aria-label="Clear Selected"
-        class="vs__clear"
-        style="display: none;"
-        title="Clear Selected"
-        type="button"
-      >
-        <svg
-          height="10"
-          width="10"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
-          />
-        </svg>
-      </button>
-      
-      <svg
-        class="vs__open-indicator"
-        height="10"
-        role="presentation"
-        width="14"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
-        />
-      </svg>
-      
-      
-      <div
-        class="vs__spinner"
-        style="display: none;"
-      >
-        Loading...
-      </div>
-      
-    </div>
-  </div>
-  <transition-stub
-    appear="false"
-    css="true"
-    name="dropdown"
-    persisted="false"
-  >
-    <ul
-      id="vs1__listbox"
-      role="listbox"
-      style="display: none; visibility: hidden;"
-    />
-  </transition-stub>
-  
-  
-</div>
+  disabled="false"
+  dropdownshouldopen="[Function]"
+  filter="[Function]"
+  filterable="false"
+  filterby="[Function]"
+  getoptionkey="[Function]"
+  getoptionlabel="[Function]"
+  label="label"
+  mapkeydown="[Function]"
+  modelvalue="[object Object]"
+  multiple="false"
+  nodrop="false"
+  options="[object Object],[object Object]"
+  placeholder=""
+  pushtags="false"
+  reduce="[Function]"
+  resetonoptionschange="false"
+  searchable="false"
+  searchinputqueryselector="[type=search]"
+  selectable="[Function]"
+  selectonkeycodes="13"
+  selectontab="false"
+  taggable="false"
+  transition="dropdown"
+  uid="1"
+/>
 `;
 
 exports[`WSelect > renders properly an icon when provided 1`] = `
-<div
-  class="v-select vs--single vs--unsearchable language-selector"
+<anonymous-stub
+  appendtobody="false"
+  autocomplete="off"
+  calculateposition="[Function]"
+  class="language-selector"
+  clearable="false"
+  clearsearchonblur="[Function]"
+  clearsearchonselect="true"
+  closeonselect="true"
+  components="[object Object]"
+  createoption="[Function]"
+  deselectfromdropdown="false"
   dir="auto"
->
-  
-  
-  <div
-    aria-expanded="false"
-    aria-label="Search for option"
-    aria-owns="vs2__listbox"
-    class="vs__dropdown-toggle"
-    id="vs2__combobox"
-    role="combobox"
-  >
-    <div
-      class="vs__selected-options"
-    >
-      
-      
-      <span
-        class="vs__selected"
-      >
-        <svg
-          class="dropdown-items"
-          fill="none"
-          height="13"
-          viewBox="0 0 12 13"
-          width="12"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M11.17 6.39 5.89 9.44.61 12.48V.29l5.28 3.05z"
-            fill="#00E2ED"
-          />
-        </svg>
-         English
-      </span>
-      
-      
-      
-      <input
-        aria-autocomplete="list"
-        aria-controls="vs2__listbox"
-        aria-labelledby="vs2__combobox"
-        autocomplete="off"
-        class="vs__search"
-        readonly=""
-        type="search"
-        value=""
-      />
-      
-    </div>
-    <div
-      class="vs__actions"
-    >
-      <button
-        aria-label="Clear Selected"
-        class="vs__clear"
-        style="display: none;"
-        title="Clear Selected"
-        type="button"
-      >
-        <svg
-          height="10"
-          width="10"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"
-          />
-        </svg>
-      </button>
-      
-      <svg
-        class="vs__open-indicator"
-        height="10"
-        role="presentation"
-        width="14"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"
-        />
-      </svg>
-      
-      
-      <div
-        class="vs__spinner"
-        style="display: none;"
-      >
-        Loading...
-      </div>
-      
-    </div>
-  </div>
-  <transition-stub
-    appear="false"
-    css="true"
-    name="dropdown"
-    persisted="false"
-  >
-    <ul
-      id="vs2__listbox"
-      role="listbox"
-      style="display: none; visibility: hidden;"
-    />
-  </transition-stub>
-  
-  
-</div>
+  disabled="false"
+  dropdownshouldopen="[Function]"
+  filter="[Function]"
+  filterable="false"
+  filterby="[Function]"
+  getoptionkey="[Function]"
+  getoptionlabel="[Function]"
+  label="label"
+  mapkeydown="[Function]"
+  modelvalue="[object Object]"
+  multiple="false"
+  nodrop="false"
+  options="[object Object],[object Object]"
+  placeholder=""
+  pushtags="false"
+  reduce="[Function]"
+  resetonoptionschange="false"
+  searchable="false"
+  searchinputqueryselector="[type=search]"
+  selectable="[Function]"
+  selectonkeycodes="13"
+  selectontab="false"
+  taggable="false"
+  transition="dropdown"
+  uid="2"
+/>
 `;
diff --git a/src/components/Tooltip/WTooltip.spec.ts b/src/components/Tooltip/WTooltip.spec.ts
new file mode 100644
index 0000000..291b2da
--- /dev/null
+++ b/src/components/Tooltip/WTooltip.spec.ts
@@ -0,0 +1,19 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import WTooltip from './WTooltip.vue'
+
+describe('WTooltip', () => {
+  it('renders properly', () => {
+    const wrapper = mount(WTooltip, {
+      props: {
+        bgColor: '#000',
+      },
+      slots: {
+        main: `<p>Text</p>`,
+        tooltip: `<p class="text-white-50">Text info</p>`
+      }
+    })
+
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
diff --git a/src/components/Tooltip/WTooltip.stories.ts b/src/components/Tooltip/WTooltip.stories.ts
new file mode 100644
index 0000000..02c25a3
--- /dev/null
+++ b/src/components/Tooltip/WTooltip.stories.ts
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WTooltip from './WTooltip.vue'
+
+const meta: any = {
+  title: 'Example/WTooltip',
+  component: WTooltip,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    bgColor: '#000',
+  },
+} satisfies Meta<typeof WTooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: any) => ({
+    components: { WTooltip },
+    setup() {
+      return { args }
+    },
+    template: `<WTooltip v-bind="args"><template #tooltip><p class="text-white-50 w-[200px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></template><template #main>
+              <span class="text-xs ml-xs">ⓘ</span>
+            </template></WTooltip>`,
+    args: {
+      bgColor: 'black-950',
+    }
+  })
+}
diff --git a/src/components/Tooltip/WTooltip.vue b/src/components/Tooltip/WTooltip.vue
new file mode 100644
index 0000000..7b5c6d2
--- /dev/null
+++ b/src/components/Tooltip/WTooltip.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="group inline relative p-[4px] -p-[4px]">
+    <slot name="main"></slot>
+    <div
+      class="tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline hover:inline transition-opacity text-sm rounded-md absolute bottom-md -translate-x-[50%] mb-sm"
+    >
+      <slot name="tooltip"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  bgColor: {
+    type: String,
+    required: true,
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.tooltip-container {
+  @apply bg-[v-bind(bgColor)];
+}
+</style>
diff --git a/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap b/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap
new file mode 100644
index 0000000..acbf789
--- /dev/null
+++ b/src/components/Tooltip/__snapshots__/WTooltip.spec.ts.snap
@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`WTooltip > renders properly 1`] = `
+<div
+  class="group inline relative p-[4px] -p-[4px]"
+  data-v-38c68585=""
+>
+  
+  <p>
+    Text
+  </p>
+  
+  <div
+    class="tooltip-container hidden min-w-max py-md px-md rounded-lg group-hover:inline hover:inline transition-opacity text-sm rounded-md absolute bottom-md -translate-x-[50%] mb-sm"
+    data-v-38c68585=""
+  >
+    
+    <p
+      class="text-white-50"
+    >
+      Text info
+    </p>
+    
+  </div>
+</div>
+`;