Не работает всплывающая подсказка

$(function() { 
  $('.modal-trigger').hover( 
    function(e) { 
      if ($(document).width() >= 641) { 
        $thisModal = $(this).children('.modal-cursor').show(); 
      } 
    }, 
    function(e) { 
      if ($(document).width() >= 641) { 
        $thisModal = $(this).children('.modal-cursor').hide(); 
      } 
    }); 
 
  $('.modal-trigger').mousemove(function(e) { 
    $(".modal-cursor").css('top', e.pageY + 10).css('left', e.pageX + 10); 
  }); 
 
  $('.icon-container').on('click', function(event) { 
    $this = $(this); 
 
    event.preventDefault(); 
    if ($(document).width() <= 640) { 
 
      $('.icon-container').not($(this)).find('.modal-cursor').hide(300); 
      $('.icon-container').find('.text').removeClass('active'); 
      console.log("test") 
      $this.find('.modal-cursor').toggle(300); 
      $this.find('.text').toggleClass('active'); 
    } 
  }); 
 
});

.home-icons { 
  margin: 0 0 89px 0; 
} 
 
.home-icons h1 { 
  text-align: center; 
  margin: 0 0 45px 0; 
} 
 
span { 
  font-family: 'Open Sans', sans-serif, Helvetica, Arial; 
} 
 
h1.home { 
  font-family: 'Open Sans', sans-serif, Helvetica, Arial; 
  font-size: 1rem; 
  color: #111111; 
  font-weight: 900; 
  text-transform: uppercase; 
  margin: 0 0 20px 0; 
  padding: 0; 
  line-height: 1; 
} 
 
.text-center { 
  margin: 0 auto; 
  text-align: center; 
} 
 
.clearfix::before, 
.clearfix::after { 
  clear: both; 
  display: table; 
  content: ' '; 
} 
 
.home-icons .icon-container { 
  display: inline-block; 
  padding: 0 25px; 
} 
 
.home-icons .icon-container .icon { 
  margin: 0 0 30px 0; 
} 
 
.home-icons .icon-container .icon img { 
  display: block; 
  margin: 0; 
} 
 
img { 
  max-width: 100%; 
  height: auto; 
} 
 
.home-icons .icon-container .text { 
  position: relative; 
  color: #111111; 
  font-weight: 600; 
  font-size: 1rem; 
} 
 
.modal-cursor { 
  background: #FFF; 
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.40); 
  color: #000000; 
  display: none; 
  font-size: 90%; 
  padding: 30px 24px; 
  position: absolute; 
  text-align: left; 
  max-width: 492px; 
  z-index: 10000; 
} 
 
@media only screen and (min-width: 641px) { 
  .modal-cursor h3 { 
    color: #111111; 
    font-family: 'Open Sans', sans-serif, Helvetica, Arial; 
    font-size: 1rem; 
    font-weight: 600; 
    margin: 0 0 10px 0; 
    padding: 0; 
    text-align: left; 
  } 
} 
 
@media only screen and (min-width: 641px) { 
  .modal-cursor p { 
    color: #111111; 
    font-family: 'Open Sans', sans-serif, Helvetica, Arial; 
    font-size: 0.8125rem; 
    margin: 0; 
    padding: 0; 
    text-align: left; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="home-icons"> 
  <h1 class="home">Your end to end solutions provider</h1> 
  <div class="text-center clearfix"> 
 
 
    <div class="icon-container"> 
      <div class="modal-trigger"> 
        <div class="icon"> 
          <img src="http://euroconveyor.ru/wp-content/uploads/2018/05/Проработка.png" alt="" class="loading"> 
        </div> 
        <div class="text"> 
          <span>Feasibility</span> 
        </div> 
        <div class="modal-cursor"> 
          <h3>Feasibility</h3> 
          <p> 
            Design, installation and budget needs are assessed to provide you with accurate project overviews. 
          </p> 
        </div> 
      </div> 
    </div> 
 
 
  </div> 
</div>