2

Подскажите, пожалуйста, как сделать так чтобы при наведении открывался попап и при этом можно было навести на содержимое попапа, сейчас он закрывается.

(function($, undefined) {
  $.fn.tooltip = function(custom) {
    var defaults = {
      container: 'body',
      alignment: 'center'
    }
    var opts = $.extend({}, defaults, custom);
    if (opts.modal) {
      if (typeof $.pjax === 'function') {
        $(document).on('pjax:end', function() {
          if ($modalNodes.length) $modalNodes.remove();
        })
      }
      $(opts.container).on('click', this.selector, function() {
        var selector = $(this);
        var layerId = selector.data('layer-id');
        var layer = $('#' + layerId);

        function positioningInner() {
          var info = {
            layerWidth: layer.outerWidth(true),
            layerHeight: layer.outerHeight(true)
          }
          layer.css({
            'margin-top': -info.layerHeight / 2,
            'margin-left': -info.layerWidth / 2
          })
        }
      });
      return;
    }
    $(opts.container).on('mouseover mouseout', this.selector, function() {

      var selector = $(this);
      var layer = $('#' + selector.data('layer-id'));
      if (layer.hasClass('tooltip-active')) {
        layer.removeClass('tooltip-active');
        return;
      } 
      var info = {
        selectorHeight: selector.outerHeight(true),
        selectorWidth: selector.outerWidth(true),
        layerWidth: layer.outerWidth(true),
        layerHeight: layer.outerHeight(true),
        offsetTop: selector.offset().top,
        positionTop: selector.position().top,
        positionLeft: selector.position().left,
        scrollAmount: $(window).scrollTop(),
        viewportHeight: $(window).height()
      };
      var layerPosition = {
        _top: function() {
          if (info.scrollAmount + info.viewportHeight - (info.offsetTop + info.selectorHeight) > info.layerHeight) {
            $('.tooltip-line').css({
              top: "0",
              bottom: "auto"
            });
            $('.tooltip-arrow ').css({
              top: "-15px",
              bottom: "auto",
              transform: "scaleY(1)"
            });
            return info.positionTop + info.selectorHeight + 10
          } else {
            $('.tooltip-line').css({
              top: "auto",
              bottom: "0"
            });
            $('.tooltip-arrow ').css({
              top: "auto",
              bottom: "-15px",
              transform: "scaleY(-1)"
            });
            return info.positionTop - info.layerHeight - 10;
          }
        },
        _left: function() {
          switch (opts.alignment) {
            case 'left':
              return info.positionLeft;
            case 'right':
              return info.positionLeft + info.selectorWidth - info.layerWidth;
            case 'center':
              return info.positionLeft + info.selectorWidth - (info.selectorWidth / 2 + info.layerWidth / 2);
            default:
              return info.positionLeft;
          }
        }
      }
      setTimeout(function() {
        layer.addClass('tooltip-active');
        layer.css({
          'top': layerPosition._top(),
          'left': layerPosition._left()
        })
        $(window).on('mouseover mouseout', function() {
          layer.removeClass('tooltip-active');
        })
        layer.on('mouseover mouseout', function(ev) {
          if ($(ev.target).is('a')) return;
          else ev.stopPropagation();
        });
      }, 0)
    });
  }
})(jQuery)

  $('.btn-circle').tooltip({ 
  	alignment: 'center' 
  });
.main-features-box {
  padding: 94px 20% 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.box-btn-circle {
  position: relative;
  cursor: pointer;
}

.box-btn-circle .btn-circle {
  display: inline-block;
  padding: 8px;
  border-radius: 50%;
  width: 144px;
  height: 144px;
  font-size: 11px;
  overflow: hidden;
  text-transform: uppercase;
  text-align: center;
  font-family: Merriweather Sans, sans-serif;
  background-color: rgba(0, 0, 0, .5);
  position: relative;
  color: #e3e3e3;
}

.box-btn-circle .btn-circle.bg-blue {
  background-color: rgba(62, 70, 167, .25);
}

.box-btn-circle .btn-circle .btn-icon {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 50%;
  margin-left: -45px;
  background-repeat: no-repeat;
  background-image: url(../images/wow/icons_sprite.png);
}

.btn-circle .btn-icon.ic_lifetime_guarantee {
  background-position: -171px 21px;
}

.btn-circle .btn-icon.ic_lifetime_support {
  background-position: -257px 15px;
}

.btn-circle .btn-icon.ic_customizable_accounts {
  background-position: -343px 19px;
}

.box-btn-circle .btn-circle .circle {
  display: inline-block;
  border: 1px dashed #68bffc;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  padding: 76px 8px 0;
  color: #e3e3e3;
}

.tooltip-wrap {
  position: absolute;
  top: 156px;
  left: 50%;
  z-index: 6;
  width: 365px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s linear, visibility 0s linear .3s;
}

.tooltip-wrap.tooltip-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s linear, visibility 0s linear;
}

.tooltip-line {
  position: absolute;
  right: 0;
  left: 0;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, #58e8fd 0, #58e8fd 41%, #8080ff 55%, #8080ff);
}

.tooltip-arrow {
  content: "";
  background-image: url(../images/wow/icons_sprite.png);
  width: 30px;
  height: 15px;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  background-position: -462px -198px;
}


.tooltip-wrap .tooltip-window {
  padding: 34px 30px;
  font-family: Merriweather Sans, sans-serif;
  width: 100%;
  background-color: rgba(25, 25, 25, .95);
}

.tooltip-wrap .tooltip-window h3 {
  font-family: Merriweather Sans, sans-serif;
  font-weight: 300;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  padding-bottom: 8px;
}

.tooltip-wrap .tooltip-window p {
  color: #797979;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}

@media (min-width: 481px) {
  .box-btn-circle .btn-circle {
    width: 162px;
    height: 162px;
    font-size: 13px;
  }
  .box-btn-circle .btn-circle .circle {
    padding: 89px 15px 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section home-info-section">
    <div class="section-title">
      <h3>Accounts</h3>
    </div>

    <div class="main-features-box">
      <div class="box-btn-circle with-pop-up" >
        <a class="btn-circle bg-blue" data-layer-id="layer1"><i class="btn-icon ic_lifetime_guarantee"></i>
        <span class="circle"><span class="circle-title">Lifetime Guarantee</span></span></a>

        <div id="layer1" class="tooltip-wrap">
          <div class="tooltip-line"></div>
          <div class="tooltip-arrow"></div>
            <div class="tooltip-window">
              <h3>Lifetime Guarantee</h3>

              <p>has built its reputation by selling hundreds of WoW characters and accounts that exceed
              consumer expectations for quality and safety. Our biggest and most incredible focus is doing EVERYTHING IN
              OUR POWER to avoid any kind of fraud - our account/character sellers sign a legal contract with us. If case
              you encounter any problem you are not at fault for, we will always give you a similar character free of
              charge, or a full Points refund (which you can use to purchase any other service on the website)
              even after years. We love being honest with our customers and we did experience 3-4 character owners trying
              to breach the contract!</p>
            </div>
        </div>
      </div>

      <div class="box-btn-circle with-pop-up">
          <a class="btn-circle bg-blue" data-layer-id="layer2"><i class="btn-icon ic_lifetime_support"></i>
          <span class="circle"><span class="circle-title">Lifetime Support</span></span></a>

          <div id="layer2" class="tooltip-wrap">
            <div class="tooltip-line"></div>
	          <div class="tooltip-arrow"></div>
            <div class="tooltip-window">
              <h3>Lifetime Support</h3>


              <p>After delivering your character or account, our job is not over. We make sure you have access to what
              you have bought at all times in order for everything to flow correctly. Purchasing a character or account
              will definitely give you a lot of (5% of what you pay is always converted into a discount
              for the future) and many customers decide to get boosted on their newly purchased toon. We will advise you
              on how to keep a low profile and point out the most appropriate boost.. We're here for you!</p>
            </div>
          </div>
      </div>

      <div class="box-btn-circle with-pop-up">
          <a class="btn-circle bg-blue" data-layer-id="layer3"><i class="btn-icon ic_customizable_accounts"></i>
          <span class="circle"><span class="circle-title">Customisable Accounts</span></span></a>

          <div id="layer3" class="tooltip-wrap">
            <div class="tooltip-line"></div>
          <div class="tooltip-arrow"></div>
            <div class="tooltip-window">
              <h3>Customisable Accounts</h3>


              <p>for any kind of character / account that fits your requirements. Once you make a request, our agents will
              ask thousands of contacts to try and find a character that matches your request. This feature is totally
              free of charge and we will focus on it the best we can.</p>
            </div>
          </div>
      </div>
    </div>
  </div>

1 ответ 1

2

Добавил стили для .tooltip-wrap:hover такие как и .tooltip-wrap.tooltip-active только убрал transition: opacity .3s linear, visibility 0s linear;

(function($, undefined) {
  $.fn.tooltip = function(custom) {
    var defaults = {
      container: 'body',
      alignment: 'center'
    }
    var opts = $.extend({}, defaults, custom);
    if (opts.modal) {
      if (typeof $.pjax === 'function') {
        $(document).on('pjax:end', function() {
          if ($modalNodes.length) $modalNodes.remove();
        })
      }
      $(opts.container).on('click', this.selector, function() {
        var selector = $(this);
        var layerId = selector.data('layer-id');
        var layer = $('#' + layerId);

        function positioningInner() {
          var info = {
            layerWidth: layer.outerWidth(true),
            layerHeight: layer.outerHeight(true)
          }
          layer.css({
            'margin-top': -info.layerHeight / 2,
            'margin-left': -info.layerWidth / 2
          })
        }
      });
      return;
    }
    $(opts.container).on('mouseover mouseout', this.selector, function() {

      var selector = $(this);
      var layer = $('#' + selector.data('layer-id'));
      if (layer.hasClass('tooltip-active')) {
        layer.removeClass('tooltip-active');
        return;
      } 
      var info = {
        selectorHeight: selector.outerHeight(true),
        selectorWidth: selector.outerWidth(true),
        layerWidth: layer.outerWidth(true),
        layerHeight: layer.outerHeight(true),
        offsetTop: selector.offset().top,
        positionTop: selector.position().top,
        positionLeft: selector.position().left,
        scrollAmount: $(window).scrollTop(),
        viewportHeight: $(window).height()
      };
      var layerPosition = {
        _top: function() {
          if (info.scrollAmount + info.viewportHeight - (info.offsetTop + info.selectorHeight) > info.layerHeight) {
            $('.tooltip-line').css({
              top: "0",
              bottom: "auto"
            });
            $('.tooltip-arrow ').css({
              top: "-15px",
              bottom: "auto",
              transform: "scaleY(1)"
            });
            return info.positionTop + info.selectorHeight + 10
          } else {
            $('.tooltip-line').css({
              top: "auto",
              bottom: "0"
            });
            $('.tooltip-arrow ').css({
              top: "auto",
              bottom: "-15px",
              transform: "scaleY(-1)"
            });
            return info.positionTop - info.layerHeight - 10;
          }
        },
        _left: function() {
          switch (opts.alignment) {
            case 'left':
              return info.positionLeft;
            case 'right':
              return info.positionLeft + info.selectorWidth - info.layerWidth;
            case 'center':
              return info.positionLeft + info.selectorWidth - (info.selectorWidth / 2 + info.layerWidth / 2);
            default:
              return info.positionLeft;
          }
        }
      }
      setTimeout(function() {
        layer.addClass('tooltip-active');
        layer.css({
          'top': layerPosition._top(),
          'left': layerPosition._left()
        })
        $(window).on('mouseover mouseout', function() {
          layer.removeClass('tooltip-active');
        })
        layer.on('mouseover mouseout', function(ev) {
          if ($(ev.target).is('a')) return;
          else ev.stopPropagation();
        });
      }, 0)
    });
  }
})(jQuery)

  $('.btn-circle').tooltip({ 
  	alignment: 'center' 
  });
.main-features-box {
  padding: 94px 20% 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.box-btn-circle {
  position: relative;
  cursor: pointer;
}

.box-btn-circle .btn-circle {
  display: inline-block;
  padding: 8px;
  border-radius: 50%;
  width: 144px;
  height: 144px;
  font-size: 11px;
  overflow: hidden;
  text-transform: uppercase;
  text-align: center;
  font-family: Merriweather Sans, sans-serif;
  background-color: rgba(0, 0, 0, .5);
  position: relative;
  color: #e3e3e3;
}

.box-btn-circle .btn-circle.bg-blue {
  background-color: rgba(62, 70, 167, .25);
}

.box-btn-circle .btn-circle .btn-icon {
  width: 90px;
  height: 90px;
  position: absolute;
  left: 50%;
  margin-left: -45px;
  background-repeat: no-repeat;
  background-image: url(../images/wow/icons_sprite.png);
}

.btn-circle .btn-icon.ic_lifetime_guarantee {
  background-position: -171px 21px;
}

.btn-circle .btn-icon.ic_lifetime_support {
  background-position: -257px 15px;
}

.btn-circle .btn-icon.ic_customizable_accounts {
  background-position: -343px 19px;
}

.box-btn-circle .btn-circle .circle {
  display: inline-block;
  border: 1px dashed #68bffc;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  padding: 76px 8px 0;
  color: #e3e3e3;
}

.tooltip-wrap {
  position: absolute;
  top: 156px;
  left: 50%;
  z-index: 6;
  width: 365px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s linear, visibility 0s linear .3s;
}
.tooltip-wrap:hover {
  opacity: 1;
  visibility: visible;
}
 .tooltip-wrap.tooltip-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s linear, visibility 0s linear;
}
.tooltip-line {
  position: absolute;
  right: 0;
  left: 0;
  width: 100%;
  height: 6px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, #58e8fd 0, #58e8fd 41%, #8080ff 55%, #8080ff);
}

.tooltip-arrow {
  content: "";
  background-image: url(../images/wow/icons_sprite.png);
  width: 30px;
  height: 15px;
  position: absolute;
  left: 50%;
  margin-left: -15px;
  background-position: -462px -198px;
}


.tooltip-wrap .tooltip-window {
  padding: 34px 30px;
  font-family: Merriweather Sans, sans-serif;
  width: 100%;
  background-color: rgba(25, 25, 25, .95);
}

.tooltip-wrap .tooltip-window h3 {
  font-family: Merriweather Sans, sans-serif;
  font-weight: 300;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  padding-bottom: 8px;
}

.tooltip-wrap .tooltip-window p {
  color: #797979;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
}

@media (min-width: 481px) {
  .box-btn-circle .btn-circle {
    width: 162px;
    height: 162px;
    font-size: 13px;
  }
  .box-btn-circle .btn-circle .circle {
    padding: 89px 15px 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section home-info-section">
    <div class="section-title">
      <h3>Accounts</h3>
    </div>

    <div class="main-features-box">
      <div class="box-btn-circle with-pop-up" >
        <a class="btn-circle bg-blue" data-layer-id="layer1"><i class="btn-icon ic_lifetime_guarantee"></i>
        <span class="circle"><span class="circle-title">Lifetime Guarantee</span></span></a>

        <div id="layer1" class="tooltip-wrap">
          <div class="tooltip-line"></div>
          <div class="tooltip-arrow"></div>
            <div class="tooltip-window">
              <h3>Lifetime Guarantee</h3>

              <p>has built its reputation by selling hundreds of WoW characters and accounts that exceed
              consumer expectations for quality and safety. Our biggest and most incredible focus is doing EVERYTHING IN
              OUR POWER to avoid any kind of fraud - our account/character sellers sign a legal contract with us. If case
              you encounter any problem you are not at fault for, we will always give you a similar character free of
              charge, or a full Points refund (which you can use to purchase any other service on the website)
              even after years. We love being honest with our customers and we did experience 3-4 character owners trying
              to breach the contract!</p>
            </div>
        </div>
      </div>

      <div class="box-btn-circle with-pop-up">
          <a class="btn-circle bg-blue" data-layer-id="layer2"><i class="btn-icon ic_lifetime_support"></i>
          <span class="circle"><span class="circle-title">Lifetime Support</span></span></a>

          <div id="layer2" class="tooltip-wrap">
            <div class="tooltip-line"></div>
	          <div class="tooltip-arrow"></div>
            <div class="tooltip-window">
              <h3>Lifetime Support</h3>


              <p>After delivering your character or account, our job is not over. We make sure you have access to what
              you have bought at all times in order for everything to flow correctly. Purchasing a character or account
              will definitely give you a lot of (5% of what you pay is always converted into a discount
              for the future) and many customers decide to get boosted on their newly purchased toon. We will advise you
              on how to keep a low profile and point out the most appropriate boost.. We're here for you!</p>
            </div>
          </div>
      </div>

      <div class="box-btn-circle with-pop-up">
          <a class="btn-circle bg-blue" data-layer-id="layer3"><i class="btn-icon ic_customizable_accounts"></i>
          <span class="circle"><span class="circle-title">Customisable Accounts</span></span></a>

          <div id="layer3" class="tooltip-wrap">
            <div class="tooltip-line"></div>
          <div class="tooltip-arrow"></div>
            <div class="tooltip-window">
              <h3>Customisable Accounts</h3>


              <p>for any kind of character / account that fits your requirements. Once you make a request, our agents will
              ask thousands of contacts to try and find a character that matches your request. This feature is totally
              free of charge and we will focus on it the best we can.</p>
            </div>
          </div>
      </div>
    </div>
  </div>

2
  • Спасибо большое за помощь
    – nimble
    14 дек 2017 в 10:25
  • @nimble, в место спасибо, лучше принять ответ... Это надо нажать на галочку слево от ответа и она станет зеленой...
    – Air
    14 дек 2017 в 10:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.