Hover PopUp in Visualforce Page

Controller code :-

public with sharing class PopupTest {
    public PopupTest(ApexPages.StandardController controller) {
    }

    public String getOwner() {
        return null;
    }
 
    public List<account> getAccounts()
    {
        List<account> accounttList = new List<account>();
        accounttList = [Select Id, Name,ownerId,Owner.Name from Account LIMIT 1];
        return accounttList ;
    }
}

Visualforce page code :-

<apex:page standardController="Account" extensions="PopupTest" standardStylesheets="true">
 <!-- <apex:includeScript value="{!$Resource.JQuery}"/>-->
 <apex:form >
<style type="text/css">
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: #000 url(bg-texture.png) repeat;
        color: #dddddd;
      }
     
           
      a {
        color: #EB067B;
      }
     
        
      /* HOVER STYLES */
      div#pop-up {
        display: none;
        z-index: 10;
        position: absolute;
        width: 200px;
        padding: 30px;
        background: #FFFFFF;
        color: #000000;
        border: 3px solid #C0C0C0;
        font-size: 100%;
      }
   
    </style>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
 <script type="text/javascript">
 
      $(function() {
        var moveLeft = 10;
        var moveDown = 5;
       
        $('a#trigger').hover(function(e) {
          $('div#pop-up').show();
                  }, function() {
          $('div#pop-up').hide();
        });
       
        $('a#trigger').mousemove(function(e) {
          $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
        });
       
      });
    </script>
    <apex:repeat value="{!accounts}" var="acc">     
        <a href="/{!acc.ownerId}" id="trigger" >{!acc.Owner.Name}</a>.
  </apex:repeat>
    <!-- HIDDEN / POP-UP DIV -->
    <div id="pop-up">
      <div> <table> <tr>
                           <td>
                             <b>  Name  </b> :
                           </td>
                           <td >  
                             {!$User.FirstName} {!$User.LastName}<br/>
                           </td>
                     </tr>
                     <tr>
                           <td>
                               <b>  Role  </b> :
                           </td>
                           <td>  
                                {!$UserRole.Name}<br/>
                           </td>
                     </tr>
                     <tr>
                         <td>
                             <b>  Phone </b> :
                          </td>
                          <td> 
                              {!$User.Phone}<br/>
                          </td>
                     </tr>
                     <tr>
                        <td>
                           <b>  Email </b> :
                         </td>
                         <td>
                           {!$User.Title}<br/></td>
                     </tr>
                </table>
            </div>
    </div>
   </apex:form>
</apex:page>

Output Screen 1 :-

Output Screen 2 :-