Показать сообщение отдельно
  #33 (permalink)  
Старый 30.06.2016, 12:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,112

tooltip в видимой части окна
alecto,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <base href="http://astravel.com.ua/" />
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/core/assets/vendor/normalize-css/normalize.css">

  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/themes/astravel/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/themes/astravel/css/custom.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/themes/astravel/css/base/elements.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/sites/default/files/color/astravel-02d29967/colors.css">
  <link rel="stylesheet" type="text/css" href="http://astravel.com.ua/core/themes/stable/css/views/views.module.css">
  <style type="text/css">
    #block-astravel-content {
      width: 700px;
      margin: 0 auto;
    }
     #follower{
        border: 3px rgb(255, 255, 255) solid;
        border-radius: 8px;
      }

 </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
jQuery.fn.center = function(event) {
    var w = $(window),
        top = w.height() - this.outerHeight(true) + w.scrollTop() - (event.pageY + 22),
        left = w.width() - this.outerWidth(true) + w.scrollLeft() - (event.pageX + 7);
    this.css("position", "absolute");
    top = top > 0 ? event.pageY + 22 : event.pageY - this.outerHeight(true);
    top < w.scrollTop() && (top = w.scrollTop());
    left = left > 0 ? event.pageX + 7 : event.pageX - this.outerWidth(true);
    left < w.scrollLeft() && (left = w.scrollLeft() + 4);
    this.css("top", top + "px");
    this.css("left", left + "px");
    return this
};
$(function() {
    var tooltip = $("<div>", {
        id: "follower"
    }).appendTo("body");
    $(".view-tury.view-display-id-page_1 .views-col").mousemove(function(event) {
        tooltip.center(event)
    }).mouseenter(function(event) {
        tooltip.html($(this).html()).stop(true, true).delay(800).fadeIn()
    }).add(tooltip).mouseleave(function() {
        tooltip.stop(true, true).delay(500).fadeOut()
    });
    tooltip.mouseenter(function(event) {
        tooltip.stop(true, true)
    })
});
  </script>
</head>

<body>
 <p style=" height: 1000px"></p>
    <div id="block-astravel-page-title" class="block block-core block-page-title-block">


      <div class="content">

  <h1 class="js-quickedit-page-title title page-title">Горящие туры и специальные предложения</h1>


    </div>
  </div>
<div id="block-astravel-content" class="block block-system block-system-main-block">


      <div class="content">
      <div class="views-element-container"><div class="view view-tury view-id-tury view-display-id-page_1 js-view-dom-id-778dd42ea816542b94de8810880c3ca3a8c259c3a185b752139401331a77005e">



      <div class="view-content">
          <div class="views-view-grid horizontal cols-3 clearfix">
            <div class="views-row clearfix row-1">
                  <div title="" class="views-col col-1" style="width: 33.333333333333%;">
            <div class="views-field views-field-field-image"><div class="field-content">  <a href="/tours/207"><img src="/sites/default/files/styles/tury_glavnaa_stranica_200_h_120/public/images/tours/chernogoria.jpg?itok=MZJ3nIBO" alt="" typeof="foaf:Image" class="image-style-tury-glavnaa-stranica-200-h-120" height="141" width="238">

</a>
</div></div><div class="views-field views-field-title"><span class="field-content"><a href="/tours/207" hreflang="ru">Черногория из Харькова. Горящий!</a></span></div><div class="views-field views-field-field-spisok-dat"><span class="views-label views-label-field-spisok-dat">Даты: </span><div class="field-content">03.07.2016 и далее по воскресеньям</div></div><div class="views-field views-field-field-dlitelnost-tura"><span class="views-label views-label-field-dlitelnost-tura">Длительность: </span><div class="field-content">7 ночей / 8 дней</div></div><div class="views-field views-field-field-stoimost-tura"><span class="views-label views-label-field-stoimost-tura">Стоимость: </span><div class="field-content">от 262</div></div><div class="views-field views-field-field-valuta"><div class="field-content">€</div></div>
          </div>
                  <div class="views-col col-2" style="width: 33.333333333333%;">
            <div class="views-field views-field-field-image"><div class="field-content">  <a href="/tours/153"><img src="/sites/default/files/styles/tury_glavnaa_stranica_200_h_120/public/images/tours/at-oludeniz-1.jpg?itok=r9z2C4fM" alt="" typeof="foaf:Image" class="image-style-tury-glavnaa-stranica-200-h-120" height="141" width="238">

</a>
</div></div><div class="views-field views-field-title"><span class="field-content"><a href="/tours/153" hreflang="ru">Новинка! Отдых на Эгейском побережье Турции с вылетом из Харькова!</a></span></div><div class="views-field views-field-field-spisok-dat"><span class="views-label views-label-field-spisok-dat">Даты: </span><div class="field-content">30.06, 04.07, 14.07, 25.07, 04.08, 15.08, 25.08, 05.09, 15.09, 26.09, 06.10, 17.10.2016</div></div><div class="views-field views-field-field-dlitelnost-tura"><span class="views-label views-label-field-dlitelnost-tura">Длительность: </span><div class="field-content">12 дней / 11 ночей, 11 дней / 10 ночей</div></div><div class="views-field views-field-field-stoimost-tura"><span class="views-label views-label-field-stoimost-tura">Стоимость: </span><div class="field-content">от 406</div></div><div class="views-field views-field-field-valuta"><div class="field-content">$</div></div>
          </div>
                  <div class="views-col col-3" style="width: 33.333333333333%;">
            <div class="views-field views-field-field-image"><div class="field-content">  <a href="/tours/242"><img src="/sites/default/files/styles/tury_glavnaa_stranica_200_h_120/public/images/tours/qcycnw4y.jpg?itok=uyXyWU4U" alt="" typeof="foaf:Image" class="image-style-tury-glavnaa-stranica-200-h-120" height="141" width="238">

</a>
</div></div><div class="views-field views-field-title"><span class="field-content"><a href="/tours/242" hreflang="ru">Отель Kaya Palazzo Golf Resort 5* Deluxe - роскошь и великолепие на берегу Средиземного моря Турции!</a></span></div><div class="views-field views-field-field-spisok-dat"><span class="views-label views-label-field-spisok-dat">Даты: </span><div class="field-content">лето 2016</div></div><div class="views-field views-field-field-dlitelnost-tura"><span class="views-label views-label-field-dlitelnost-tura">Длительность: </span><div class="field-content">от 7 ночей / 8 дней</div></div><div class="views-field views-field-field-stoimost-tura"><span class="views-label views-label-field-stoimost-tura">Стоимость: </span><div class="field-content">от 899</div></div><div class="views-field views-field-field-valuta"><div class="field-content">$</div></div>
          </div>
              </div>



      </div>

    </div><div class="more-link"><a href="/tours/hot">Смотреть все горящие туры</a></div>

          </div>
</div>

    </div>
  </div>


<p style=" height: 1000px"></p>

</body>
</html>

Последний раз редактировалось рони, 30.06.2016 в 12:55.
Ответить с цитированием