Show DIV in tooltip for Anchor Tag

Question

I am very new to Jquery. Everything what I see looks strange.. I need to show a DIV section as a tooltip for Anchor Tag. I could able to toggle the visibility of DIV . But, it is not showing up as a tooltip, rather it is displayed on the top corner of the screen.. Is it possible to show the DIV section just like a Tooltip for the Anchor Tag..

Thanks in advance..

<div id = "contact" class = "tooltip" style="display: none">
<asp:Label Font-Bold = "true" ID = "custLbl" runat = "server" Text = "Phone: " ></asp:Label>
<asp:Label Font-Bold = "true" ID = "custMobLbl" runat = "server" Text = "" ></asp:Label>
<br />
<asp:Label Font-Bold = "true" ID = "custLbl2" runat = "server" Text = "Mail:  " ></asp:Label>
<asp:Label Font-Bold = "true" ID = "custMailLbl" runat = "server" Text = "" ></asp:Label>
</div>

    $(function () {
        $('.contactLink').hover(function () {
            $('#contact').show();
        }, function () {
            $('#contact').hide();
        });
    });



<a  class = "contactLink" href="javascript:void();"> Click me </a>

Answer 1

Add this onto page

var mouseX;
var mouseY;
$(document).mousemove( function(e) {
   mouseX = e.pageX; 
   mouseY = e.pageY;
}); 

and then change your code as

$(function () {
        $('.contactLink').hover(function () {
            $('#contact').show();
            $('#DivToShow').css({'top':mouseY,'left':mouseX}).show();
        }, function () {
            $('#contact').hide();
        });
    });