UI pour l'appel au moral

styles/simple.css

@@ -812,17 +812,13 @@ ul, li {
   left: 0px;
   text-align: center;
 }
+
+/* ======================================== */
+/* dialogue competence : Appel au moral */
 .diffAppelAuMoral {
   display: none !important;
 }
-.diffAppelAuMoral-checker {
-  height: 20px;
-  background-image: url('../icons/moral-neutre.svg');
-  background-size: cover;
-}
-.diffAppelAuMoral:checked + .diffAppelAuMoral-checker {
-  background-image: url('../icons/moral-heureux.svg');
-}
+
 .iconeSmile	 {
   height: 20px;
   width: 20px;
@@ -830,9 +826,37 @@ ul, li {
   outline: none;
   background-size: cover;
 }
-.textSmile {
+
+/* Tooltip container */
+.tooltipAppelAuMoral {
+  position: relative;
+  display: inline-block;
+  border-bottom: 0; 
 }
 
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltipAppelAuMoral:hover .tooltipAppelAuMoralText {
+  visibility: visible;
+  opacity: 1;
+}
+
+/* Tooltip text */
+.tooltipAppelAuMoral .tooltipAppelAuMoralText {
+  text-align: center;
+  
+  /* Position the tooltip text */
+  position: absolute;
+  z-index: 1;
+  top: -10px;
+  left: 18%;
+  
+  /* Fade in tooltip */
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+
 /* ======================================== */
 /* Fatigue CSS */
 .table-fatigue {