Tooltip on mouse click. Code snippet works but when embedded on a website, it does not work. Not sure why

Question

I have a full-screen click area. A tooltip appears near the mouse pointer on mouse click and disappears on mouse move. The code snippet seems to work fine. But when I embed the code on my website, it throws an error: $ is not a function. (In '$(document)', '$' is undefined). Not sure why. Any help would be appreciated.

  $(document).ready(function(){
          
              $('.fullscreen-click-area').click(showBox).mousemove(hideBox);
          
              function showBox(e){
                  $('.tooltip').fadeIn().css(({ left:  e.pageX, top: e.pageY }));
              }
              
              function hideBox(){
                  $('.tooltip').fadeOut();
              }
          });

      .fullscreen-click-area {
          background-color: #7F7F7F;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: 100vh;
        }
        
        .tooltip {
            margin:10px;
            padding:12px;
            border:2px solid #000;
            width:60px;
            position: absolute;
            display: none;
            background-color: #fff;
            
        }

<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>

<div class="fullscreen-click-area"></div>
<div class="tooltip">TOOLTIP</div>