infos dans bulles hover

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

@@ -68,6 +68,62 @@
             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