handling tooltips when out of the screen

src/format-types/tooltip/tooltip-front.js

@@ -7,7 +7,6 @@ function initTooltips(tooltipWords) {
 		createTooltip(word);
 	});
 }
-
 function createTooltip(tooltipWord) {
 	const tooltipPopup = document.createElement("div");
 	tooltipPopup.className = "tooltip-popup";
@@ -37,7 +36,6 @@ function hideTooltip(tooltipWord) {
 	const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
 	tooltipPopup.setAttribute("aria-hidden", "true");
 }
-
 function toggleTooltip(tooltipWord) {
 	const isExpanded = tooltipWord.getAttribute("aria-expanded") === "true";
 	if (isExpanded) {
@@ -46,12 +44,45 @@ function toggleTooltip(tooltipWord) {
 		showTooltip(tooltipWord);
 	}
 }
+
+function getCurrentPos(entry) {
+	return parseInt(getComputedStyle(entry.target, null).getPropertyValue("left"));
+}
 window.addEventListener("DOMContentLoaded", (event) => {
 	let tooltipWords = document.querySelectorAll("[data-tooltip-definition]");
 
+	// CHAPTER IntersectionObserver
+	const tooltipsObserver = new IntersectionObserver((entries) => {
+		entries.forEach((entry) => {
+			const margin = 10;
+
+			// DEPASSE À GAUCHE
+			if (entry.boundingClientRect.x < 0) {
+				const currentPos = getCurrentPos(entry);
+				const missingSpace = Math.abs(entry.boundingClientRect.x);
+				entry.target.style.left = `${currentPos + missingSpace + margin}px`;
+				entry.target.style.setProperty("--tooltip-x-position", "12%");
+			}
+			// DEPASSE À DROITE
+			if (entry.boundingClientRect.x + entry.boundingClientRect.width > window.innerWidth) {
+				const currentPos = getCurrentPos(entry);
+				const difference = entry.boundingClientRect.width - entry.intersectionRect.width;
+
+				entry.target.style.left = `${currentPos - difference - margin}px`;
+				entry.target.style.setProperty("--tooltip-x-position", `calc(60% + ${difference}px)`);
+			}
+
+			// Check aspect ratio to be sure the element is visible
+			// const aspect = entry.intersectionRatio;
+			// if (entry.isIntersecting) {
+			// }
+		});
+	});
+	initTooltips(tooltipWords);
 	tooltipWords.forEach((tooltipWord) => {
+		tooltipsObserver.observe(tooltipWord.querySelector(".tooltip-popup"));
+
 		tooltipWord.addEventListener("click", (event) => {
-			// showTooltip(tooltipWord);
 			toggleTooltip(tooltipWord);
 		});
 		tooltipWord.addEventListener("keydown", (event) => {
@@ -71,12 +102,9 @@ window.addEventListener("DOMContentLoaded", (event) => {
 				hideTooltip(tooltipWord);
 			}
 		});
-		// tooltipWord.addEventListener("focusin", (event) => {
-		// 	showTooltip(tooltipWord);
-		// });
+
 		tooltipWord.addEventListener("focusout", (event) => {
 			hideTooltip(tooltipWord);
 		});
 	});
-	initTooltips(tooltipWords);
 });

src/format-types/tooltip/tooltip.css

@@ -17,6 +17,7 @@
 	padding: 10px;
 	max-width: 300px;
 	width: max-content;
+	--tooltip-x-position: 50%;
 }
 .tooltip-popup[aria-hidden="true"] {
 	display: none;
@@ -27,7 +28,8 @@
 	background-color: white;
 	position: absolute;
 	top: 100%;
-	left: 50%;
+	/* left: 50%; */
+	left: var(--tooltip-x-position);
 	width: 20px;
 	height: 20px;
 	transform: translate(-50%, -50%) rotate(45deg);