diff --git a/macao/assets/_custom.scss b/macao/assets/_custom.scss
index 9b6b0746ccb99514320f6a2fc6a0153c334dc924..a4faeaa00d8348b0f21c3b12df823c2dcac9b3d3 100644
--- a/macao/assets/_custom.scss
+++ b/macao/assets/_custom.scss
@@ -126,15 +126,6 @@ a.active {
   text-decoration: underline;
 }
 
-.commentaireInfo {
-  padding: 10px;
-  border-radius: 10px;
-  background-color: var(--secondary-background-color);
-  border: 1px solid var(--macao-primary-color);
-  color: black;
-  max-width: 500px;
-}
-
 
 em:not(:has(strong)) {
     background-color: lightgray;
diff --git a/macao/assets/custom.js b/macao/assets/custom.js
index fa504167e6546797a7cd57b086d0d970d0e9d0cc..e49595b46e3b0a57d1f2d26c9fe0c160ddebfbae 100644
--- a/macao/assets/custom.js
+++ b/macao/assets/custom.js
@@ -8,13 +8,26 @@ $(document).ready(function() {
     $('.book-header').show();
 
     $('.commentaireInfo').hide();
-    $('.commentaireInfo').prop('popover', 'auto');
-    $('.commentaireInfoGroup').prop("hidden", false);
+    // $('.commentaireInfo').prop('popover', 'auto');
+    $('.commentaireInfoGroup').show();
 
     // Comment popover
-    $('[spanid]').addClass('comment-trigger').on('click', function() {
-        let spanid = $(this).attr('spanid');
-        $("[commentaireid=" + spanid + "]").toggle();
+    $('[spanid]').addClass('comment-trigger').each(function (){
+        const spanid = $(this).attr('spanid');
+
+        if($("[commentaireid=" + spanid + "]").length !== 0) {
+            $(this).popover({
+                trigger: 'click',
+                html: true,
+                placement: 'auto',
+                content: $("[commentaireid=" + spanid + "]")
+            });
+            $("[commentaireid=" + spanid + "]").toggle()
+        }
+    });
+
+    $(document).on('click', function() {
+        $('[spanid]').popover('hide');
     });
 
     // Simplify th in td