diff --git a/core/static/bundled/core/tooltips-index.ts b/core/static/bundled/core/tooltips-index.ts
index 42a1cc82..47df492d 100644
--- a/core/static/bundled/core/tooltips-index.ts
+++ b/core/static/bundled/core/tooltips-index.ts
@@ -1,7 +1,8 @@
-import { type Placement, computePosition } from "@floating-ui/dom";
+import { type Placement, computePosition, offset } from "@floating-ui/dom";
 
 /**
  * Library usage:
+ *
  * Add a `tooltip` attribute to any html element with it's tooltip text
  * You can control the position of the tooltp with the `tooltip-position` attribute
  * Allowed placements are `top`, `right`, `bottom`, `left`
@@ -10,6 +11,13 @@ import { type Placement, computePosition } from "@floating-ui/dom";
  * You can customize your tooltip by passing additionnal classes or ids to it
  * You can use `tooltip-class` and `tooltip-id` to add additional elements to the
  * `class` and `id` attribute of the generated tooltip
+ *
+ * @example
+ * ```html
+ * <p tooltip="tooltip text"></p>
+ * <p tooltip="tooltip left" tooltip-position="left"></p>
+ * <div tooltip="tooltip custom class" tooltip-class="custom custom-class"></div>
+ * ```
  **/
 
 type Status = "open" | "close";
@@ -68,6 +76,7 @@ addEventListener("mouseover", (event: MouseEvent) => {
 
   computePosition(target, tooltip, {
     placement: getPlacement(target),
+    middleware: [offset(6)],
   }).then(({ x, y }) => {
     Object.assign(tooltip.style, {
       left: `${x}px`,
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 0481c280..544903a2 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -45,35 +45,6 @@ body {
   }
 }
 
-@mixin tooltip {
-  @include shadow;
-  z-index: 1;
-  pointer-events: none;
-  background-color: #333;
-  color: #fff;
-  border: 0.5px solid hsl(0, 0%, 50%);
-  border-radius: 5px;
-  padding: 5px 10px;
-  position: absolute;
-  white-space: nowrap;
-  opacity: 0;
-  transition: opacity 500ms ease-in;
-}
-
-.tooltip {
-  @include tooltip;
-  position: absolute;
-  width: max-content;
-
-  left: 0;
-  top: 0;
-}
-
-.tooltip[tooltip-status=open] {
-  opacity: 1;
-  transition: opacity 500ms ease-in;
-}
-
 .ib {
   display: inline-block;
   padding: 1px;