Comment work (popover)

macao/assets/_custom.scss

@@ -95,3 +95,22 @@ select.sd-dropdown.inline-dropdown, input.sd-input.inline-input {
   padding: 0px 5px;
   background-color: var(--secondary-background-color);
 }
+
+// ***********************************
+// Comment on page
+// ***********************************
+
+.comment-trigger {
+  cursor: pointer;
+  color: var(--macao-primary-color);
+  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;
+}

macao/assets/custom.js

@@ -6,4 +6,13 @@ $(document).ready(function() {
 
     // Add Title on top of the page
     $('.book-header').show();
+
+    $('.commentaireInfo').hide();
+    $('.commentaireInfo').prop('popover', 'true');
+    $('.commentaireInfoGroup').show();
+
+    $('[spanid]').addClass('comment-trigger').on('click', function() {
+        let spanid = $(this).attr('spanid');
+        $("[commentaireid=" + spanid + "]").toggle();
+    });
 });