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.
    – userStack
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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