Problem with position relative and responsive

Navigation
0

I am developing an interactive map with <div> instead of the <map> tag but I have a problem when it works with responsive. That is to say, when I shrink the explorer the capsules are out of phase and I do not know how I could organize them again. The example can be found here link

The html code is: 

<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>

I'm using tooltipster to make the tooltip, and the tooltip code is: 

$(document).ready(function() {
    $('.tooltip').tooltipster({
        theme: ['tooltipster-noir', 'tooltipster-noir-customized'],
        side: ['top', 'bottom']
    });
});

I need to make the "tooltip" adapt to the responsive. Any idea how to do this? Or the same effect in a different way? Thank you. Greetings

    
asked by Armando García 17.01.2017 в 20:48
source

2 answers

1

You could do the following:

  • At div.map-container :
    • Add position: relative .
  • At div.tooltip :
    • Move them within div.map-container
    • Add position: absolute
    • Fix the top and left (from now on they will be relative to map-container )

Like this: 

<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 : Consider using classes for different tooltip .

    
answered by 17.01.2017 / 21:17
source
0

Try putting the mouse over the country of Mexico. 

$( 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>
    
answered by 17.01.2017 в 21:11
Form integrated in groupBox Problems when it detects the functions of my controller