Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Всплывающее окно на JQuery на карте (https://javascript.ru/forum/jquery/74475-vsplyvayushhee-okno-na-jquery-na-karte.html)

romang 15.07.2018 15:58
Всплывающее окно на JQuery на карте
 
Всем доброго времени суток. Есть вот такая карта http://test.pip-mollusca.org/planograma2/ при наведение на выделенные белым участики показываеться всплывающее окно. Проблема в том, что если убрать курсор с участка окно скрывается и нет возможности нажать кнопку "Подробнее".
Подскажите пожалуйста как можно решить эту проблему.
Спасибо

Окно показываться с помощью вот этого кода

<script>
    $('.part').hover (
      function() {
        $('.description').html($(this).attr('description-data'));
        $('.description').fadeIn(50);
      },
      function() {
        $('.description').fadeOut();
      }
    )
      </script>


ну и код карты 

<div style="position: relative;">
 
  <img class="map" src="img/genplan_m.jpg" usemap="#image-map">
  <svg id="map" style="position: absolute; top: 0;left: 0;height: 100%;width: 100%;" viewBox="0 0 1056 527.03998">
      <a href="#">
    <path class="part" d="m 745.8,497.81141 12.25714,-16.97143 32.05715,26.4 -15.08572,9.42857 z" fill="white" opacity=".8" description-data="
    <img src='img/gg.png' alt=''>
    <span class='opys'>Номер участка: <b>675</b></span>
    <span class='opys'>Площадь общая, соток: <b>23.16</b> </span>
    <br><br>
    <a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
    "></a>
 
  <a href="#">
    <path class="part" d="m 754.03847,481.70433 12.66731,-16.00081 32.00163,25.33462 -11.33391,14.66742 z" fill="white" opacity=".8" description-data="
    <img src='img/gg2.png' alt=''>
    <span class='opys'>Номер участка: <b>676</b></span>
    <span class='opys'>Площадь общая, соток: <b>23.2</b> </span>
    <br><br>
    <a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
    "></a>
 
    <a href="#">
      <path class="part" d="m 766.70578,465.03681 10.33386,-14.33406 33.33504,25.00128 -10.66721,14.66741 z" fill="white" opacity=".8" description-data="
      <img src='img/gg2.png' alt=''>
      <span class='opys'>Номер участка: <b>677</b></span>
      <span class='opys'>Площадь общая, соток: <b>23.2</b> </span>
      <br><br>
      <a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
      "></a>
 
  </svg>
<div class="description"></div>
 
</div>

рони 15.07.2018 20:09
tooltip delay jQuery подсказка с задержкой
 
romang,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
      background-color: #228B22;
  }
  .map{
     height: 500px;width: 500px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(window).on("load", function() {
   $( ".part" ).attr("title","").tooltip({
   content:  function(a) {
   a($(this).attr("description-data"))
},
   hide: {  delay: 1700 }


});
});
  </script>
</head>

<body>
<div style="position: relative;">

  <img class="map" src="img/genplan_m.jpg" usemap="#image-map">
  <svg id="map" style="position: absolute; top: 0;left: 0;height: 100%;width: 100%;" viewBox="0 0 1056 527.03998">
      <a href="#">
    <path class="part" d="m 745.8,497.81141 12.25714,-16.97143 32.05715,26.4 -15.08572,9.42857 z" fill="white" opacity=".8" description-data="
    <img src='img/gg.png' alt=''>
    <span class='opys'>Номер участка: <b>675</b></span>
    <span class='opys'>Площадь общая, соток: <b>23.16</b> </span>
    <br><br>
    <a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
    "></a>

  <a href="#">
    <path class="part" d="m 754.03847,481.70433 12.66731,-16.00081 32.00163,25.33462 -11.33391,14.66742 z" fill="white" opacity=".8" description-data="
    <img src='img/gg2.png' alt=''>
    <span class='opys'>Номер участка: <b>676</b></span>
    <span class='opys'>Площадь общая, соток: <b>23.2</b> </span>
    <br><br>
    <a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
    "></a>

    <a href="#">
      <path class="part" d="m 766.70578,465.03681 10.33386,-14.33406 33.33504,25.00128 -10.66721,14.66741 z" fill="white" opacity=".8" description-data="
      <img src='img/gg2.png' alt=''>
      <span class='opys'>Номер участка: <b>677</b></span>
      <span class='opys'>Площадь общая, соток: <b>23.2</b> </span>
      <br><br>
      <a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
      "></a>

  </svg>
<div class="description"></div>

</div>

</body>
</html>

romang 16.07.2018 05:22
Спасибо Рони за подсказку

romang 16.07.2018 07:29
Какая-то странная ситуация. Приведенный пример у меня на локалке и на сервере ведет себя странно. То не прогружает окна, или прогружает с большой задержкой. А в приведенном примере работает отлично, за исключением медленного скрытия предыдущих окон

рони 16.07.2018 09:12
romang,
попробуйте без load
$(function() {
$( ".part" ).attr("title","").tooltip({
   content:  function(a) {
   a($(this).attr("description-data"))
},
   hide: {  delay: 1700 }
});
});

рони 16.07.2018 21:33
tooltip hover jQuery подсказка с задержкой
 
Цитата:
Сообщение от romang
за исключением медленного скрытия предыдущих окон
другой вариант ... 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{
      background-color: #228B22;
  }
  .map{
     height: 500px;width: 500px;
  }
  .part:hover{
      fill : #EEE8AA;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
  $(function() {
      $(".part").tooltip({
          items: ".part",
          content: function(a) {
              return $(this).attr("description-data")
          },
          show: {
              delay: 200
          },
          close: function(event, ui) {
              ui.tooltip.hover(
                  function() {
                      $(this).stop(true).fadeIn(100);
                  },
                  function() {
                      $(this).fadeOut(400, function() {
                          $(this).remove();
                      });
                  }
              )
          }
      });
  });
  </script>
</head>

<body>
<div style="position: relative;">

  <img class="map" src="img/genplan_m.jpg" usemap="#image-map">
  <svg id="map" style="position: absolute; top: 0;left: 0;height: 100%;width: 100%;" viewBox="0 0 1056 527.03998">
      <a href="#">
    <path class="part" d="m 745.8,497.81141 12.25714,-16.97143 32.05715,26.4 -15.08572,9.42857 z" fill="white" opacity=".8" description-data="
    <img src='img/gg.png' alt=''>
    <span class='opys'>Номер участка: <b>675</b></span>
    <span class='opys'>Площадь общая, соток: <b>23.16</b> </span>
    <br><br>
    <a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
    "></a>

  <a href="#">
    <path class="part" d="m 754.03847,481.70433 12.66731,-16.00081 32.00163,25.33462 -11.33391,14.66742 z" fill="white" opacity=".8" description-data="
    <img src='img/gg2.png' alt=''>
    <span class='opys'>Номер участка: <b>676</b></span>
    <span class='opys'>Площадь общая, соток: <b>23.2</b> </span>
    <br><br>
    <a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
    "></a>

    <a href="#">
      <path class="part" d="m 766.70578,465.03681 10.33386,-14.33406 33.33504,25.00128 -10.66721,14.66741 z" fill="white" opacity=".8" description-data="
      <img src='img/gg2.png' alt=''>
      <span class='opys'>Номер участка: <b>677</b></span>
      <span class='opys'>Площадь общая, соток: <b>23.2</b> </span>
      <br><br>
      <a style='text-decoration: none; padding: 5px 10px; background: #008000; color:beige;border-radius: 10px;' href='detail.html'>Подробнее</a>
      "></a>

  </svg>
<div class="description"></div>

</div>

</body>
</html>


Часовой пояс GMT +3, время: 21:09.