diff --git a/demo/templates/demo/components.html.twig b/demo/templates/demo/components.html.twig
index 8f623244..8b766196 100644
--- a/demo/templates/demo/components.html.twig
+++ b/demo/templates/demo/components.html.twig
@@ -753,6 +753,7 @@
         </div>
 
         <h2>Tooltips</h2>
+        <h3>Positions de base</h3>
         <div class="button-list">
             <a href="#" class="button button--neutral tooltip tooltip--top" data-tooltip="Tooltip du haut">
                 Tooltip en 👆
@@ -768,6 +769,19 @@
             </a>
         </div>
 
+        <h3>Alignement</h3>
+        <div class="button-list">
+            <a href="#" class="button button--neutral tooltip tooltip--top tooltip--align-left" data-tooltip="Tooltip du haut aligné à gauche">
+                Tooltip en 👆 aligné à gauche
+            </a>
+            <a href="#" class="button button--neutral tooltip tooltip--left tooltip--align-top" data-tooltip="Tooltip à gauche aligné en haut">
+                Tooltip à 👈 aligné en haut
+            </a>
+            <a href="#" class="button button--neutral tooltip tooltip--bottom tooltip--align-right" data-tooltip="Tooltip en bas aligné à droite">
+                Tooltip en 👇 aligné à droite
+            </a>
+        </div>
+
         <h2>Tags</h2>
         <span class="tag">Tag</span>
         <span class="tag tag--success">Validé</span>
diff --git a/style/components/data-table.scss b/style/components/data-table.scss
index 8bf5e894..eb2fe24d 100755
--- a/style/components/data-table.scss
+++ b/style/components/data-table.scss
@@ -11,6 +11,7 @@
 .data-table__content {
   border: solid 1px var(--border);
   border-radius: 10px;
+  overflow-x: auto;
 
   .drop__button {
     border-radius: 3px;
@@ -20,10 +21,3 @@
     }
   }
 }
-
-@media (max-width: $screen-md) {
-  .data-table__content {
-    overflow-x: auto;
-  }
-}
-
diff --git a/style/components/tooltip.scss b/style/components/tooltip.scss
index 1c53ff71..1a0e8697 100755
--- a/style/components/tooltip.scss
+++ b/style/components/tooltip.scss
@@ -6,43 +6,40 @@
 
   &:before,
   &:after {
-    position: absolute;
-    pointer-events: none;
-    z-index: 1;
     opacity: 0;
     transition: opacity ease-in .15s;
   }
 
-  &:before {
-    min-width: 100px;
-    padding: 7px 10px;
-    color: var(--primary);
-    font-size: 13px;
-    text-decoration: none;
-    text-align: center;
-    white-space: nowrap;
-    background: var(--background--dark);
-    border-radius: 4px;
-    content: attr(data-tooltip);
-  }
-
-  &:after {
-    width: 0;
-    height: 0;
-    content: '';
-  }
-
   &:hover,
   &:focus {
     color: var(--primary);
 
     &:before,
     &:after {
+      position: absolute;
+      pointer-events: none;
+      z-index: 1;
       opacity: 1;
     }
 
     &:before {
+      min-width: 100px;
+      padding: 7px 10px;
       justify-content: center;
+      color: var(--primary);
+      font-size: 13px;
+      text-decoration: none;
+      text-align: center;
+      white-space: nowrap;
+      background: var(--background--dark);
+      border-radius: 4px;
+      content: attr(data-tooltip);
+    }
+
+    &:after {
+      width: 0;
+      height: 0;
+      content: '';
     }
   }
 }
@@ -50,81 +47,158 @@
 .tooltip--top {
   &:before,
   &:after {
-    bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
   }
 
-  &:before { margin-bottom: 10px; }
+  &:before {
+    margin-bottom: 10px;
+    bottom: 100%;
+  }
 
   &:after {
     margin-bottom: 4px;
+    bottom: calc(100% + 1px);
     border: 6px solid transparent;
     border-top-color: var(--background--dark);
     border-bottom: none;
   }
+
+  &.tooltip--align-left { @extend %tooltip--align-left; }
+  &.tooltip--align-right { @extend %tooltip--align-right; }
 }
 
 .tooltip--bottom {
   &:before,
   &:after {
-    top: 100%;
     left: 50%;
     transform: translateX(-50%);
   }
 
-  &:before { margin-top: 10px; }
+  &:before {
+    margin-top: 10px;
+    top: 100%;
+  }
 
   &:after {
     margin-top: 4px;
-    top: 100%;
+    top: calc(100% + 1px);
     border: 6px solid transparent;
     border-bottom-color: var(--background--dark);
     border-top: none;
   }
+
+  &.tooltip--align-left { @extend %tooltip--align-left; }
+  &.tooltip--align-right { @extend %tooltip--align-right; }
 }
 
 .tooltip--left {
   &:before,
   &:after {
-    right: 100%;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  &:before { margin-right: 10px; }
+  &:before {
+    right: 100%;
+    margin-right: 10px;
+  }
 
   &:after {
     margin-right: 4px;
+    right: calc(100% + 1px);
     border: 6px solid transparent;
     border-left-color: var(--background--dark);
     border-right: none;
   }
+
+  &.tooltip--align-top { @extend %tooltip--align-top; }
+  &.tooltip--align-bottom { @extend %tooltip--align-bottom; }
 }
 
 .tooltip--right {
   &:before,
   &:after {
-    left: 100%;
     top: 50%;
     transform: translateY(-50%);
   }
 
-  &:before { margin-left: 10px; }
+  &:before {
+    margin-left: 10px;
+    left: 100%;
+  }
 
   &:after {
     margin-left: 4px;
+    left: calc(100% + 1px);
     border: 6px solid transparent;
     border-right-color: var(--background--dark);
     border-left: none;
   }
+
+  &.tooltip--align-top { @extend %tooltip--align-top; }
+  &.tooltip--align-bottom { @extend %tooltip--align-bottom; }
+}
+
+%tooltip--align-left {
+  &:before,
+  &:after {
+    right: unset;
+    left: 0;
+    transform: none;
+  }
+
+  &:hover,
+  &:focus {
+    &:after { left: 3px; }
+  }
+}
+
+%tooltip--align-right {
+  &:before,
+  &:after {
+    right: 0;
+    left: unset;
+    transform: none;
+  }
+
+  &:hover,
+  &:focus {
+    &:after { right: 3px; }
+  }
+}
+
+%tooltip--align-top {
+  &:before,
+  &:after {
+    top: 0;
+    bottom: unset;
+    transform: none;
+  }
+
+  &:hover,
+  &:focus {
+    &:after { top: 3px; }
+  }
+}
+
+%tooltip--align-bottom {
+  &:before,
+  &:after {
+    top: unset;
+    bottom: 0;
+    transform: none;
+  }
+
+  &:hover,
+  &:focus {
+    &:after { bottom: 3px; }
+  }
 }
 
 @media (max-width: $screen-md) {
   .tooltip {
     &:before,
-    &:after {
-      display: none;
-    }
+    &:after { display: none; }
   }
 }