diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index a53341c..cb1ee54 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -1782,4 +1782,88 @@ td{
   
 }
 
-// Fin
\ No newline at end of file
+
+// Html5 Tooltip
+.info {
+  color: #009bbf;
+  position: relative;
+  display: inline-block;
+  text-overflow: ellipsis;
+
+  .info-text-top {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    padding: 5px;
+    border-radius: 6px;
+    max-width: 500px;
+    min-width: fit-content;
+    white-space: normal;
+
+    /* Position the tooltip text */
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+
+    /* Fade in tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  .info-text-top::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+  }
+  .info-text-bottom {
+    visibility: hidden;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    padding: 5px;
+    border-radius: 6px;
+    max-width: 500px;
+    min-width: fit-content;
+    white-space: normal;
+
+    /* Position the tooltip text */
+    position: absolute;
+    z-index: 1;
+    top: 125%;
+    left: 200%;
+    margin-left: -60px;
+
+    /* Fade in tooltip */
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  .info-text-bottom::after {
+    content: "";
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent #555 transparent;
+  }
+}
+.info:hover {
+  .info-text-top {
+    visibility: visible;
+    opacity: 1;
+  }
+  .info-text-bottom {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+// Fin
diff --git a/app/views/admin/price_documents/analyse_reponses.html.haml b/app/views/admin/price_documents/analyse_reponses.html.haml
index f4c2572..b88eab3 100644
--- a/app/views/admin/price_documents/analyse_reponses.html.haml
+++ b/app/views/admin/price_documents/analyse_reponses.html.haml
@@ -189,7 +189,7 @@
                             - display_comment = "#{line.comment[0..10]} (..)"
                           - else
                             - display_comment = line.comment
-                          - cell << "<span class='info'>#{ic('info-circle')} #{display_comment}<span class='info-text'>#{line.comment}</span></span>"
+                          - cell << "<span class='info'>#{ic('info-circle')} #{display_comment}<span class='info-text-top'>#{line.comment}</span></span>"
 
                         %td.p-0{class: ("best-price" if line.id == best_price[0])}
                           =# "reponse price_line ID : #{line.id}"
@@ -306,51 +306,7 @@
     color: orange;
   }
 
-  .info {
-    color: #009bbf;
-    position: relative;
-    display: inline-block;
-    text-overflow: ellipsis;
 
-    .info-text {
-      visibility: hidden;
-      background-color: #555;
-      color: #fff;
-      text-align: center;
-      padding: 5px;
-      border-radius: 6px;
-      max-width: 500px;
-      min-width: fit-content;
-      white-space: normal;
-
-      /* Position the tooltip text */
-      position: absolute;
-      z-index: 1;
-      bottom: 125%;
-      left: 50%;
-      margin-left: -60px;
-
-      /* Fade in tooltip */
-      opacity: 0;
-      transition: opacity 0.3s;
-    }
-    .info-text::after {
-      content: "";
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      margin-left: -5px;
-      border-width: 5px;
-      border-style: solid;
-      border-color: #555 transparent transparent transparent;
-    }
-  }
-  .info:hover {
-    .info-text {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
   .darkblue {
     color: darkblue;
   }