added support for popups

www/css/style.css

@@ -345,6 +345,65 @@ section p.stand-out {
 	}
 }
 
+/*--------------------------------------------------------*/
+/* POPUP
+/*--------------------------------------------------------*/
+
+/* Popup container */
+.popup-trigger {
+	position: relative;
+	display: inline-block;
+	cursor: pointer;
+	text-decoration: dotted underline;
+  }
+
+
+  /* The actual popup (appears on top) */
+.popup-trigger .popup {
+	visibility: hidden;
+	min-width: 180px;
+	max-width: 350%;
+	background-color: #555;
+	color: #fff;
+	text-align: center;
+	border-radius: 6px;
+	padding: 8px 0;
+	position: absolute;
+	z-index: 1;
+	bottom: 125%;
+	left: 50%;
+	margin-left: -80px;
+  }
+
+  /* Popup arrow */
+.popup-trigger .popup::after {
+	content: "";
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	margin-left: -5px;
+	border-width: 5px;
+	border-style: solid;
+	border-color: #555 transparent transparent transparent;
+  }
+  
+  /* Toggle this class when clicking on the popup container (hide and show the popup) */
+  .popup-trigger .show {
+	visibility: visible;
+	-webkit-animation: fadeIn 1s;
+	animation: fadeIn 1s
+  }
+  
+  /* Add animation (fade in the popup) */
+  @-webkit-keyframes fadeIn {
+	from {opacity: 0;}
+	to {opacity: 1;}
+  }
+  
+  @keyframes fadeIn {
+	from {opacity: 0;}
+	to {opacity:1 ;}
+  }
 
 /*--------------------------------------------------------*/
 /* POULPE

www/index.html

@@ -438,7 +438,12 @@
           <span class="cal-event-end-date">26/11/2023 4:00</span>
           <span class="cal-event-location">Petit Pôt</span>
           <span class="cal-event-description">
-            Une exposition comprenant des mosaïques de Lego, des photos, et des tableaux dichroïques.
+            Une triple exposition comprenant :<br>
+            - des mosaïques de Lego <br>
+            - <div class="popup-trigger">des photos
+            <span class="popup">Des lacs et montagnes du Connemara aux reliefs contrastés des Alpes en passant par les côtes bretonnes et normandes, cette exposition présente trois triptyques paysagers, neuf vues du ciel vous permettant d’admirer la nature sous un angle unique.</span>
+            </div><br>
+            - des tableaux dichroïques.
           </span>
         </div>
 
@@ -605,7 +610,7 @@
 <!-- Note: tipso plugin requires the full jQuery library, the slim one is not sufficient -->
 <!-- <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script> -->
 <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
-<!-- <script type="text/javascript" src="js/stars.js"></script> -->
+<script type="text/javascript" src="js/popup.js"></script>
 <script type="text/javascript" src="js/tipso.min.js"></script>
 <script type="text/javascript" src="js/calendar.js"></script>
 
@@ -621,6 +626,9 @@
       endDate: new Date(2023, 10, 26, 5),
       groupEventsByLocation: true
     });
+    $('.popup-trigger').click(function(){
+      $(this).children($('.popup')).toggleClass("show")
+    });
   });
 </script>