1

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

2
  • @aldanux de acuerdo, eliminare mi comentario fuera de lugar, pero muchos usuarios no dicen nada de nada. el 17 ene. 2017 a las 20:17
  • @x-rw - eso no es nada fuera de lo normal, ni para preocuparse y con un comentario tampoco atraerás más la atención el 17 ene. 2017 a las 20:21

2 respuestas 2

1

Podrías hacer lo siguiente:

  • Al div.map-container:
    • Agregale position: relative.
  • A los div.tooltip:
    • Muevelos dentro de div.map-container
    • Agregales position: absolute
    • Corrige el top y left (a partir de ahora serán relativos al map-container )

Así:

<div class="map-container" style="position: relative;">
  <img src="imagenes/mapa.png" width="1000" height="1294" alt="Mapa"/>

  <div class="tooltip" data-tooltip-content="#administracion" style="top: 817px; left: 451px; position: absolute;">A</div>
  <div class="tooltip" data-tooltip-content="#canchas" style="top: 974px; left: 611px; position: absolute;">A</div>
  <div class="tooltip" data-tooltip-content="#toboganes" style="top: 910px; left: 215px; position: absolute;">A</div>
</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>

PD: Considera usar clases para los diferentes tooltip.

1
  • 1
    Excelente! Qué lapsus tuve, la solución es lógica por menos. Todo funciona ahora perfectamente si el top y el left los uso con % el 17 ene. 2017 a las 20:40
0

Prueba poniendo encima del pais de Mexico el mouse.

$( function() {
    $( document ).tooltip();
  } );
label {
    display: inline-block;
    width: 5em;
  }
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



<img src="https://wiki.erepublik.com/images/thumb/d/d2/Map-Mexico.jpg/400px-Map-Mexico.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="Este es Mexico" href="google.com" shape="poly" coords="24,57,24,75,31,86,31,91,28,96,22,92,37,107,42,120,47,130,49,136,53,133,47,117" id="age" />
    <area alt="" title="Este es Mexico" href="http://es.stackoverflow.com/" shape="poly" coords="49,122,41,97,36,79,34,74,39,67,45,71,49,90,61,104,70,124,83,151,79,162,99,177,119,189,146,197,156,194,167,202,174,198,182,195,180,184,185,181,200,174,206,167,217,153,199,149,190,154,187,163,175,173,144,165,139,153,135,137,146,117,136,108,128,88,121,82,102,79,94,70,78,71,60,68,32,56,26,57" />
    [...]
</map>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.