https://audioprotesistas.org/wp-content/themes/Divi-child/custom_shortcodes/mapa-espana/mapa_espana.js

1document.addEventListener('DOMContentLoaded', () => {
2    const tooltip = document.getElementById('map-tooltip');
3	
4	const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
5	if (isSafari) {
6		document.documentElement.classList.add('safari');
7	} else {
8		document.documentElement.classList.add('no-safari');
9	}
10
11
12
13      const paths = document.querySelectorAll('.mapa-espana svg > path');
14
15      paths.forEach(path => {
16        path.addEventListener('mouseenter', (event) => {
17          const members = event.target.getAttribute('data-members');
18          
19          tooltip.textContent = members+" asociados";
20
21          const container = event.target.closest('svg'); // Suponiendo que el contenedor es el SVG
22
23            // Calculamos la posición del path dentro del contenedor
24            const containerRect = container.getBoundingClientRect();
25            const pathRect = event.target.getBoundingClientRect();
26    
27            // Calculamos la posición del tooltip respecto al contenedor
28            const top = pathRect.top - containerRect.top;
29            const left = pathRect.left - containerRect.left;
30    
31            // Posicionar el tooltip
32            tooltip.style.top = `${top  + (pathRect.height / 2) - 12.5}px`;  // Ajusta el espacio superior
33            tooltip.style.left = `${left + (pathRect.width / 2) - (tooltip.offsetWidth / 2)}px`;  // Centrado sobre el pat
34            
35            //console.log(`TOP : ${top} RectH: ${pathRect.height} ToolH: ${tooltip.offsetHeight}`);
36          // Hacer visible el tooltip
37          tooltip.style.display = 'block';
38        });
39
40        path.addEventListener('mouseleave', () => {
41          // Ocultar el tooltip cuando el mouse se va
42          tooltip.style.display = 'none';
43        });
44      });
45  });