diff --git a/packages/bbui/src/Tooltip/TooltipWrapper.svelte b/packages/bbui/src/Tooltip/TooltipWrapper.svelte
index 4c20cb54a0..bddd204dea 100644
--- a/packages/bbui/src/Tooltip/TooltipWrapper.svelte
+++ b/packages/bbui/src/Tooltip/TooltipWrapper.svelte
@@ -1,12 +1,10 @@
 <script>
-  import Tooltip from "./Tooltip.svelte"
   import Icon from "../Icon/Icon.svelte"
+  import AbsTooltip from "./AbsTooltip.svelte"
 
   export let tooltip = ""
   export let size = "M"
   export let disabled = true
-
-  let showTooltip = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -14,20 +12,15 @@
   <slot />
   {#if tooltip}
     <div class="icon-container">
-      <div
-        class="icon"
-        class:icon-small={size === "M" || size === "S"}
-        on:mouseover={() => (showTooltip = true)}
-        on:mouseleave={() => (showTooltip = false)}
-        on:focus
-      >
-        <Icon name="InfoOutline" size="S" {disabled} />
-      </div>
-      {#if showTooltip}
-        <div class="tooltip">
-          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+      <AbsTooltip text={tooltip}>
+        <div
+          class="icon"
+          class:icon-small={size === "M" || size === "S"}
+          on:focus
+        >
+          <Icon name="InfoOutline" size="S" {disabled} hoverable />
         </div>
-      {/if}
+      </AbsTooltip>
     </div>
   {/if}
 </div>
@@ -44,14 +37,6 @@
     margin-left: 5px;
     margin-right: 5px;
   }
-  .tooltip {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    top: 15px;
-    z-index: 200;
-    width: 160px;
-  }
   .icon {
     transform: scale(0.75);
   }