Reuse bootstrap popover

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;

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