diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
index 47a7e077..4472ab05 100644
--- a/src/components/Tooltip.vue
+++ b/src/components/Tooltip.vue
@@ -2,14 +2,15 @@
 defineProps<{
   content: string
   placement: 'left' | 'right' | 'top' | 'bottom'
+  type?: 'default' | 'dark' | 'white'
 }>()
 </script>
 
 <template>
-  <span class="tooltip-wrapper">
+  <span class="b-tooltip-wrapper">
     <div
-      class="tooltip"
-      :class="placement"
+      class="b-tooltip"
+      :class="[`b-tooltip--placement-${placement ?? 'top'}`, `b-tooltip--type-${type ?? 'default'}`]"
     >
       {{ content }}
     </div>
@@ -18,38 +19,49 @@ defineProps<{
 </template>
 
 <style lang="scss" scoped>
-.tooltip-wrapper {
+.b-tooltip-wrapper {
   --at-apply: flex items-center relative;
 
-  .tooltip {
+  .b-tooltip {
     --at-apply: absolute px-2 py-1 rounded-8
-      bg-black dark:bg-white
       pointer-events-none
-      text-sm text-white dark:text-black
+      text-sm
       opacity-0 duration-300
       shadow-$bew-shadow-2;
     white-space: nowrap;
 
-    &.right {
+    &--placement-right {
       --at-apply: left-[calc(100%+0.5em)];
     }
 
-    &.left{
+    &--placement-left{
       --at-apply: right-[calc(100%+0.5em)];
     }
 
-    &.top {
+    &--placement-top {
       --at-apply: top--2.5em left-1/2;
       transform: translateX(-50%);
     }
 
-    &.bottom {
+    &--placement-bottom {
       --at-apply: bottom--2.5em left-1/2;
       transform: translateX(-50%);
     }
+
+    &--type-default {
+      --at-apply: text-white dark:text-black bg-black dark:bg-white;
+    }
+
+    &--type-dark {
+      --at-apply: text-white bg-black;
+    }
+
+    &--type-white {
+      --at-apply: text-black bg-white;
+    }
   }
 
-  &:hover .tooltip {
+  &:hover .b-tooltip {
     --at-apply: opacity-100;
   }
 }