Нужна помощь с pop up

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