jquery - Popup partial view on mouse move and hide on mouse out -

i'm pretty new javascript , running problem asp.net mvc 4 application. want dynamically display list of skills (in category) project when user hovers on project's skill category. here 2 questions:

1. right jquery pop partial view (which blank right now), when move mouse off of popup, remains. have click close button rid of popup. i've tried mouseleave vs. mouseout. why popup not closing when leave it?

2. how list of skills project in popup? there can 0 or many skills in each category , i'd display them in own project-skill-category popup (i.e. if user hovers on soft skills image related project 1, popup window softskills project 1).

here razor view:

<link href="../content/popup-project-skills.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../scripts/jquery-1.9.1.js"></script> <script type="text/javascript" src="../scripts/popup-project-skills.js"></script>  @foreach (var item in model) {     <tr class="project-in-list">         <td>             @html.actionlink(item.name, "details", new { id = item.id })         </td>         <td>             @html.displayfor(modelitem => item.locationname)         </td>         <td>             @html.displayfor(modelitem => item.status)         </td>          <td align=center class="btn"><img src="../../content/images/check.png" style="visibility: @(item.hasprogrammingskills ? "visible" : "hidden") "/></td>         <td align=center class="btn"><img src="../../content/images/check.png" style="visibility: @(item.hassoftskills ? "visible" : "hidden") "/></td>          <!-- want these in popup instead of printing them in new column -->         <td>             @foreach(var skill in item.programmingskills)             {                 @html.displayfor(modelitem => skill.skillname)                 @html.raw("; ")             }             @foreach(var skill in item.softskills)             {                 @html.displayfor(modelitem => skill.skillname)                 @html.raw("; ")             }         </td>      </tr> } 

, javascript using:

function loadpopup() {     $("#backgroundpopup").css({"opacity": "0.1"});     $("#backgroundpopup").fadein("fast");     $("#popupcontact").slidedown("fast"); } function disablepopup() {     $("#backgroundpopup").fadeout("slow");     $("#popupcontact").slideup("fast"); } function centerpopup() {     var windowwidth = document.documentelement.clientwidth;     var windowheight = document.documentelement.clientheight;     var popupheight = $("#popupcontact").height();     var popupwidth = $("#popupcontact").width();     $("#popupcontact").css({"position": "absolute","top": windowheight/2-popupheight/2,"left": windowwidth/2-popupwidth/2});     $("#backgroundpopup").css({"height": windowheight}); }  $(document).ready(function() {     $(".btn").mouseover(function()     {         centerpopup();         loadpopup();     });      $("#btn").mouseout(function ()             // not work -> not sure why     {         disablepopup();     });      $("#popupcontactclose, .c_btn").click(function()     {         disablepopup();     }); }); 

instead of popup have considered using jquery ui's tooltip object?

it simpler solution think.