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

easyTooltip всплывающая подсказка с паузой
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;
    }

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

  <script>
 (function ($) {
    $.fn.easyTooltip = function (options) {
        var defaults = {
            xOffset: 10,
            yOffset: 25,
            tooltipId: "easyTooltip",
            clickRemove: false,
            content: "",
            useElement: "",
            source: null,
            pause: 0
        };
        var options = $.extend(defaults, options);
        var content;
        this.each(function () {
            var title = $(this).attr("title");
            $(this).hover(function (e) {
                content = options.content != "" ? options.content : title;
                content = options.useElement != "" ? $("#" + options.useElement).html() : content;
                content = typeof options.source == "function" ? options.source(this) : content;
                $(this).attr("title", "");
                if (content != "" && content != undefined) {
                    $("body").append("<div id='" + options.tooltipId + "'>" + content + "</div>");
                    $("#" + options.tooltipId)
                    .css({"position": "absolute",
                          "top": e.pageY - options.yOffset + "px",
                          "left": e.pageX + options.xOffset + "px",
                          "display": "none"}).delay(options.pause).fadeIn("fast")
                }
            }, function () {
                $("#" + options.tooltipId).remove();
                $(this).attr("title", title)
            });
            $(this).mousemove(function (e) {
                $("#" + options.tooltipId).css({"top": e.pageY - options.yOffset + "px",
                "left": e.pageX + options.xOffset + "px"})
            });
            if (options.clickRemove) $(this).mousedown(function (e) {
                $("#" + options.tooltipId).remove();
                $(this).attr("title", title)
            })
        })
    }
})(jQuery);
$(function() {
    $(".view-tury.view-display-id-page_1 .views-col").easyTooltip({
        source: function(el) {
            return $(el).html()
        },
        tooltipId: "follower",
        pause: 1500
    })
});
  </script>
</head>

<body>

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




</body>
</html>
Ответить с цитированием