Make DIV show next to cursor on hover

Question

I have setup a JSFiddle of what I currently have, the basic functionality works but the div just seems to show whereever it is rather than by the cursor. This on the live site results in the box showing no where near the checkbox, at first I thought it was an issue with the position or z-index but now I don't think so.

Ok I have got this working in a JS Fiddle but for some reason it's not working on the site... It's in the menu under 'Your Event'

http://217.199.187.74/merlineventslondon.com/

Any help would be awesome - http://jsfiddle.net/ThisWebGuy/GYXE2/

JS

// Awards Dinner
$("input[type='checkbox'][value='awards-dinner']").mouseover(function(){         
$(".awardsbox").show();         
$(".awardsbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='awards-dinner']").mouseout(function(){        
$(".awardsbox").hide();     
});

// Awards Dinner Dance
$("input[type='checkbox'][value='awards-dinner-dance']").mouseover(function(){         
$(".awardsdinnerdancebox").show();         
$(".awardsdinnerdancebox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='awards-dinner-dance']").mouseout(function(){        
$(".awardsdinnerdancebox").hide();     
});

// Cocktail Party
$("input[type='checkbox'][value='cocktail-party']").mouseover(function(){         
$(".cocktailbox").show();         
$(".cocktailbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='cocktail-party']").mouseout(function(){        
$(".cocktailbox").hide();     
});

// Dinner
$("input[type='checkbox'][value='dinner']").mouseover(function(){         
$(".dinnerbox").show();         
$(".dinnerbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='dinner']").mouseout(function(){        
$(".dinnerbox").hide();     
});

// Dinner and Dance
$("input[type='checkbox'][value='dinner-dance']").mouseover(function(){         
$(".dinnerdancebox").show();         
$(".dinnerdancebox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='dinner-dance']").mouseout(function(){        
$(".dinnerdancebox").hide();     
});

// Networking Event
$("input[type='checkbox'][value='networking-event']").mouseover(function(){         
$(".networkingbox").show();         
$(".networkingbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='networking-event']").mouseout(function(){        
$(".networkingbox").hide();     
});

// Party
$("input[type='checkbox'][value='party']").mouseover(function(){         
$(".partybox").show();         
$(".partybox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 15) + "px"         
});     
});
$("input[type='checkbox'][value='party']").mouseout(function(){        
$(".partybox").hide();     
});

HTML

<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner">Awards Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="awards-dinner-dance">Awards Dinner Dance</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="barbat-mitzvah">Bar/Bat Mitzvah</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="cocktail-party">Cocktail Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner">Dinner</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="dinner-dance">Dinner Dance</label> <br>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="networking-event">Networking Event</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="party">Party</label>
<label><input type="checkbox" id="tchkb-1" name="taxo[1][term][]" value="vip-experience">VIP Experience</label>

<div class="awardsbox">
    <p>Perfect for a formal dinner with an awards presentation. AV equipment and a team of technicians are included to ensure your event goes smoothly as well as a three course meal, unlimited wine, beer and soft drinks, staffing and furniture.</p>
</div>

<div class="awardsdinnerdancebox">
<p>Perfect for awards dinner celebrations or charity events. AV equipment and a team of technicians are included to ensure your event goes smoothly as well as  a three course meal, unlimited wine, beer and soft drinks, staffing and furniture. Not to forget a DJ and Disco to ensure your guests dance the night away.</p>
</div>

<div class="dinnerdancebox">
<p>This style of event is more formal and ideal for events where you may need to entertain guests or clients with a formal drinks reception, dinner and a great party afterwards.  A three course meal and unlimited wine, beer and soft drinks are included as well as AV, staffing and furniture.</p>
</div>

<div class="dinnerbox">
<p>This style of event is more formal and ideal for events where you may need to entertain clients without the full party or disco atmosphere. A three course meal and unlimited wine, beer and soft drinks are included as well as AV, staffing and furniture.</p>
</div>

<div class="partybox">
<p>Perfect for both corporate or private celebrations, parties include a DJ & Disco as well as a bowl food menu and unlimited wine, beer and soft drinks. AV, staffing and furniture are also included.</p>
</div>

<div class="networkingbox">
<p>A classic three hour networking event ideal for client parties where talking business is key. Canapés, unlimited wine, beer and soft drinks as well as staffing, AV and furniture are all included in our quotes.</p>
</div>

<div class="cocktailbox">
<p>A cocktail party is a classic three hour networking event ideal for client parties where talking business is key. Canapés, unlimited wine, beer and soft drinks as well as staffing, AV and furniture are all included in our quotes.</p>
</div>

CSS

.awardsbox, .awardsdinnerdancebox, .dinnerdancebox, .dinnerbox, .partybox, .networkingbox, .cocktailbox{
    display: none;
    padding: 7px;
    background-color: red;
    width: 300px;
    position:absolute;
    z-index: 999;
}

Answer 1

You are missing 'e' in the function

.mouseover(function(e) ...

.mouseout(function(e){ ...

It will work if you add parameter 'e' for event

Answer 2

Get the current mouse position and use the xy coordinates as following

$("input[type='checkbox'][value='awards-dinner']").mouseover(function(e){      
$(".awardsbox").show();         
$(".awardsbox").css({             
top: (e.pageY + 50) + "px",             
left: (e.pageX + 50) + "px"         
});     
});

get the event as "e" in the argument of function(e)

check the first checkbox in the fiddle

Edit: sorry i added code to get the coordinates again .. have updated the code and fiddle

Answer 3

http://jsfiddle.net/GYXE2/24/ check this fiddle

dude Too much jquery code ,just cleaned up some code ,this might reduce the file size.And thats what jquery is for right.

$(".showPopUp").mouseover(function(e){         
  $("."+this.id).show();         
  $("."+this.id).css({             
    top:  e.pageY,             
    left: e.pageX         
  });     
}).mouseout(function(){        
  $("."+this.id).hide();     
});

Answer 4

There are a couple of things to notice here, first when passing .css as object, always wrap the keys in quotes.

But the basic thing you need to do here, in your code, is first of all to pass the event in the function aka ..function(e) so that it is available in whatever you do next. Otherwise, e.whatever is undefined.

Then, you should take a look at what properties of e you have available, by console.log(e).

By doing so, you will see (in FF at least) the coordinates are noted as clientX and clientY, therefore you should call e.clientX & e.clientY coordinates respectively.

I have updated your jsfiddle with the first example working as you describe, take a look and ask for clarifications if needed.

$("input[type='checkbox'][value='awards-dinner']").mouseover(function(e){
  console.log(e.clientX);
  $(".awardsbox").show();         
  $(".awardsbox").css({             
    'top': e.clientY + "px",             
    'left': e.clientX + "px"         
  });     
});