Проблема с position relative и responsive

Я разрабатываю интерактивную карту с <div> вместо tag <map> но я имею проблему по отношению к, что функционировал с responsive. А именно, когда я уменьшаю браузер, капсулы - defasadas и не, как он мог бы организовывать их снова. Пример они могут получать это здесь http://www.toboganes.cl/

Код html:

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

Я использую tooltipster, чтобы делать tooltip, и код tooltip:

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

Я нуждаюсь в том, чтобы способствовать тому, чтобы "tooltip" приспособился к responsive. Какая-то идея из как это делать? Или: тот же эффект другим образом? Спасибо. Привет

1
задан 17.01.2017, 22:09
0 ответов

Ты мог бы делать следующее:

  • В div.map-container:
    • Добавь его position: relative.
  • В div.tooltip:
    • Двинь их внутри div.map-container
    • Добавь их position: absolute
    • Исправь top и left (с этого момента они будут относительными в map-container )

Так:

<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: Считай использовать классы для различных tooltip.

1
ответ дан 03.12.2019, 17:38
  • 1
    Превосходный! Qué ошибка я имел, solució n он ló gica из-за меньше. Все функционирует сейчас верно, если top и left я использую их с % –  17.01.2017, 22:40

Доказательство помещая на стране Мексики мышь.

$( 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>
0
ответ дан 03.12.2019, 17:38