Jquery overlay page on link hover

I have a html structure like-

<div class="fullcalendar-instance">
<a href="/saasmax/trunk/isv-events/my-birthday" field="field_e_date" allDay="1" start="2011-04-28" end="2011-04-28" index="0" eid="177" entity_type="node" cn="fc-event-default isv_events node-type-isv_events" title="My BIRTHday" class="fullcalendar-event-details" editable=""><span class="date-display-single">Thu, 04/28/2011</span></a>
</div>
<div class="fullcalendar-instance">
<a href="/saasmax/trunk/isv-events/version-8-drupal" field="field_e_date" allDay="1" start="2012-04-01" end="2012-04-01" index="0" eid="176" entity_type="node" cn="fc-event-default isv_events node-type-isv_events" title="Version 8 Drupal" class="fullcalendar-event-details" editable=""><span class="date-display-single">Sun, 04/01/2012</span></a>
</div>

Now i want that on hovering upon the link an overlay of text should come that should contain a dynamic display(depending upon the href attribute of a tag). Upon clicking the overlay the user should get redirected to the actual page..

Now the content of the overlay can be disregarded as not important but how to get this overlay and take user to the actual pag开发者_如何学JAVAe on clicking of the overlay??

Sort of like this?

http://jsfiddle.net/5Xwaw/