Estoy desarrollando un mapa interactivo con <div>
en vez de el tag <map>
pero tengo un problema a la hora de que funcione con responsive. Es decir, cuando achico el explorador las cápsulas están defasadas y no se cómo podría organizarlas de nuevo. El ejemplo lo pueden conseguir acá http://www.toboganes.cl/
El código html es:
<div class="map-container"><img src="imagenes/mapa.png" width="1000" height="1294" alt="Mapa"/></div>
<div class="tooltip" data-tooltip-content="#administracion" style="top: -307px; left: 674px;">A</div>
<div class="tooltip" data-tooltip-content="#canchas" style="top: -230px; left: 604px;">A</div>
<div class="tooltip" data-tooltip-content="#toboganes" style="top: -210px; left: 615px;">A</div>
<div class="tooltip_templates" style="display: none;">
<span id="administracion">
<img src="imagenes/mapa/administracion.jpg"/><br><br>
<strong>Administración</strong>
</span>
</div>
Estoy usando tooltipster para hacer el tooltip, y el código del tooltip es:
$(document).ready(function() {
$('.tooltip').tooltipster({
theme: ['tooltipster-noir', 'tooltipster-noir-customized'],
side: ['top', 'bottom']
});
});
Necesito hacer que el "tooltip" se adapte al responsive. ¿Alguna idea de cómo hacer esto? O ¿el mismo efecto de diferente manera? Gracias. Saludos