infos dans bulles hover

web/themes/custom/reha/dist/css/bundle.css

@@ -3301,6 +3301,12 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
   margin-left: 12.5%;
 }
 
+.page-mon-espace-de-travail {
+  /* On cache le texte mais on le garde accessible */
+  /* On crée l’icône "i" */
+  /* Tooltip : on réaffiche le vrai texte stocké */
+  /* Affichage au survol */
+}
 .page-mon-espace-de-travail .layout-content {
   padding-bottom: 3rem;
   width: 80%;
@@ -3358,8 +3364,56 @@ html.js body.node-type-operation.node-id-7 div.dialog-off-canvas-main-canvas div
 .page-mon-espace-de-travail .paragraph-type--dossier h4 {
   display: none;
 }
+.page-mon-espace-de-travail .description {
+  position: relative;
+  display: inline-block;
+  color: transparent; /* rend le texte invisible */
+  font-size: 0; /* supprime l'espace du texte */
+}
+.page-mon-espace-de-travail .description::before {
+  content: "i";
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 50%;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  font-weight: bold;
+  font-size: 14px;
+  cursor: pointer;
+}
+.page-mon-espace-de-travail .description::after {
+  content: attr(data-text); /* On va injecter le texte via un attribut */
+  visibility: hidden;
+  opacity: 0;
+  width: 250px;
+  background-color: #333;
+  color: #fff;
+  text-align: left;
+  border-radius: 6px;
+  padding: 8px;
+  position: absolute;
+  z-index: 1;
+  top: 120%;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: opacity 0.3s;
+  font-size: 13px;
+  line-height: 1.4;
+  pointer-events: none;
+}
+.page-mon-espace-de-travail .description:hover::after {
+  visibility: visible;
+  opacity: 1;
+}
 
 .field--name-field-dossier-de-pilotage h4 ::after {
   content: "";
   border-top: solid 1px black;
+}
+
+.messages--error {
+  color: red;
 }

web/themes/custom/reha/js/reha.js

@@ -306,4 +306,39 @@ jQuery(document).ready(function($){
 //     }
 //   };
 // })(jQuery, Drupal);
-// ////////////////////  end div infos site  ////////////////////////
+// ////////////////////  end div infos site  ////////////////////////
+
+
+// document.querySelectorAll('.description').forEach(el => {
+//   el.setAttribute('data-text', el.textContent.trim());
+// });
+
+function initDescriptionTooltips(root = document) {
+  root.querySelectorAll('.description').forEach(el => {
+    if (!el.hasAttribute('data-text')) {
+      el.setAttribute('data-text', el.textContent.trim());
+    }
+  });
+}
+
+// Initialisation sur la page actuelle
+initDescriptionTooltips();
+
+// Observer pour détecter les nouveaux éléments ajoutés au DOM
+const observer = new MutationObserver(mutations => {
+  mutations.forEach(mutation => {
+    mutation.addedNodes.forEach(node => {
+      if (node.nodeType === 1) { // élément HTML
+        if (node.matches('.description')) {
+          initDescriptionTooltips(node.parentNode);
+        } else {
+          // Si c'est un conteneur qui contient des .description
+          initDescriptionTooltips(node);
+        }
+      }
+    });
+  });
+});
+
+// Observer sur tout le body
+observer.observe(document.body, { childList: true, subtree: true });

web/themes/custom/reha/scss/pages/_page-mon-espace-de-travail.scss

@@ -68,6 +68,61 @@
             display: none;
         }
     }
+
+/* On cache le texte mais on le garde accessible */
+.description {
+    position: relative;
+    display: inline-block;
+    color: transparent;        /* rend le texte invisible */
+    font-size: 0;              /* supprime l'espace du texte */
+  }
+  
+  /* On crée l’icône "i" */
+  .description::before {
+    content: "i";
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 50%;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+    font-size: 14px;
+    cursor: pointer;
+    // font-family: Arial, sans-serif;
+  }
+  
+  /* Tooltip : on réaffiche le vrai texte stocké */
+  .description::after {
+    content: attr(data-text); /* On va injecter le texte via un attribut */
+    visibility: hidden;
+    opacity: 0;
+    width: 250px;
+    background-color: #333;
+    color: #fff;
+    text-align: left;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 1;
+    top: 120%;
+    left: 50%;
+    transform: translateX(-50%);
+    transition: opacity 0.3s;
+    font-size: 13px;
+    line-height: 1.4;
+    pointer-events: none;
+  }
+  
+  /* Affichage au survol */
+  .description:hover::after {
+    visibility: visible;
+    opacity: 1;
+  }
+  
+
 }
 
 // #edit-field-dossier-de-pilotage-wrapper
@@ -76,4 +131,9 @@
         content: "";
         border-top: solid 1px black;
     }
+}
+
+
+.messages--error{
+    color:red;
 }