https://www.antidote.info/user/themes/antidote/js/floating.js?g-9ac0be51

1$(document).ready(function () {
2	initialiseTooltip_FloatingUI();
3	initialiseMenu_FloatingUI();
4	initialiseMenuAvecFleche_FloatingUI();
5	initialiseSousMenu_FloatingUI();
6});
7
8$(document).on("resize", function () {
9	initialiseTooltip_FloatingUI();
10	initialiseMenu_FloatingUI();
11	initialiseMenuAvecFleche_FloatingUI();
12	initialiseSousMenu_FloatingUI();
13});
14
15function initialiseTooltip_FloatingUI(root = document) {
16	const referenceEls = root.querySelectorAll(".floating-reference");
17	const floatingEls = root.querySelectorAll(".floating-tooltip");
18	const arrowEls = root.querySelectorAll(".floating-arrow");
19
20	initialiseMenusContextuels(referenceEls, floatingEls, arrowEls)
21}
22
23function initialiseMenu_FloatingUI() {
24	const referenceEls = document.querySelectorAll(".floating-reference-menu");
25	const floatingEls = document.querySelectorAll(".floating-menu");
26	const arrowEls = null;
27	const allowedPlacements = ["bottom"];
28
29	initialiseMenusContextuels(referenceEls, floatingEls, arrowEls, "menu", allowedPlacements)
30}
31
32function initialiseMenuAvecFleche_FloatingUI() {
33	const referenceEls = document.querySelectorAll(".floating-reference-menu-avec-fleche");
34	const floatingEls = document.querySelectorAll(".floating-menu-avec-fleche");
35	const arrowEls = document.querySelectorAll(".floating-arrow-menu");
36	const allowedPlacements = ["bottom"];
37
38	initialiseMenusContextuels(referenceEls, floatingEls, arrowEls, "menu-avec-fleche", allowedPlacements)
39}
40
41function initialiseSousMenu_FloatingUI() {
42	const referenceEls = document.querySelectorAll(".floating-reference-sous-menu");
43	const floatingEls = document.querySelectorAll(".floating-sous-menu");
44	const arrowEls = null;
45	var allowedPlacements = ["right", "left"];
46
47	initialiseMenusContextuels(referenceEls, floatingEls, arrowEls, "sous-menu", allowedPlacements)
48}
49
50function initialiseMenusContextuels(
51	referenceEls,
52	floatingEls,
53	arrowEls,
54	type = "tooltip",
55	allowedPlacements = ["top", "bottom"],
56	offsetValue = 0
57) {
58	referenceEls.forEach((referenceEl, i) => {
59		const floatingEl = floatingEls[i];
60		var arrowEl = null;
61		var placements = allowedPlacements;
62
63		if (arrowEls) {
64			arrowEl = arrowEls[i];
65		}
66
67		if (floatingEl.getAttribute("data-allowed-pos")) {
68			placements = floatingEl.getAttribute("data-allowed-pos")?.split(" ");
69		}
70
71		initialiseMenuContextuel(type, referenceEl, floatingEl, arrowEl, placements, offsetValue);
72	});
73}
74
75function initialiseMenuContextuel(
76	type = "tooltip",
77	referenceEl,
78	floatingEl,
79	arrowEl,
80	allowedPlacements,
81	offsetValue = 0,
82) {
83	switch (type) {
84		case 'menu':
85			_comportementMenu(referenceEl, floatingEl)
86			offsetValue = 9;
87			break;
88		case 'menu-avec-fleche':
89			_comportementMenu(referenceEl, floatingEl)
90			break;
91		case 'sous-menu':
92			_comportementSousMenu(referenceEl, floatingEl)
93			break;
94		default:
95			_comportementTooltip(referenceEl, floatingEl);
96			break;
97	}
98
99	_definiEmplacementMenuContextuel(referenceEl, floatingEl, arrowEl, allowedPlacements, offsetValue);
100}
101
102function _definiEmplacementMenuContextuel(
103	referenceEl,
104	floatingEl,
105	arrowEl,
106	allowedPlacements,
107	offsetValue = 0
108) {
109	const { computePosition, autoUpdate, autoPlacement, offset, shift, arrow } = FloatingUIDOM;
110	var floatingOffset = offsetValue;
111	var arrowLen = 0;
112
113	if (arrowEl) {
114		arrowLen = arrowEl.offsetWidth;
115		floatingOffset = (Math.sqrt(2 * arrowLen ** 2) / 2 + 4) + offsetValue;
116	}
117
118	autoUpdate(referenceEl, floatingEl, () => {
119		computePosition(referenceEl, floatingEl, {
120			middleware: [
121				offset(floatingOffset),
122				autoPlacement({
123					allowedPlacements: allowedPlacements,
124				}),
125				shift({ padding: 9 }),
126				arrow({ element: arrowEl }),
127			],
128		}).then(({ x, y, middlewareData, placement }) => {
129			Object.assign(floatingEl.style, {
130				left: `${x}px`,
131				top: `${y}px`,
132			});
133			const side = placement.split("-")[0];
134
135			const staticSide = {
136				top: "bottom",
137				right: "left",
138				bottom: "top",
139				left: "right",
140			}[side];
141
142			if (arrowEl && middlewareData.arrow) {
143				const { x, y } = middlewareData.arrow;
144				Object.assign(arrowEl.style, {
145					left: x != null ? `${x}px` : "",
146					top: y != null ? `${y}px` : "",
147					// Ensure the static side gets unset when
148					// flipping to other placements' axes.
149					right: "",
150					bottom: "",
151					[staticSide]: `${-arrowLen / 2}px`,
152				});
153			}
154		});
155	});
156}
157
158function _comportementMenu(referenceEl, floatingEl) {
159	document.addEventListener('click', function(e) {
160		var target = e.target;
161		if (target == floatingEl) {
162			return;
163		}
164		if (target == referenceEl) {
165			e.preventDefault();
166			floatingEl.classList.add('menu-visible');
167		} else {
168			floatingEl.classList.remove('menu-visible');
169		}
170	});
171}
172
173function _comportementSousMenu(referenceEl, floatingEl) {
174	$(referenceEl).hover(() => {
175		$(floatingEl).addClass("menu-visible");
176	});
177
178	$(referenceEl).parent().siblings().each(function() {
179		$(this).hover((e) => {
180			if (e.target != referenceEl) {
181				$(floatingEl).removeClass("menu-visible");
182			}
183		})
184	});
185}
186
187function _comportementTooltip(referenceEl, floatingEl) {
188	$(referenceEl).on("mouseover", () => {
189		$(floatingEl).addClass("tooltip-visible");
190	});
191
192	$(referenceEl).on("mouseout", () => {
193		$(floatingEl).removeClass("tooltip-visible");
194	});
195}