Screenshot:
HTML:
<a href="#" class="note-tip" note="The quick brown fox jump over the lazy dog...">Hover here...</a>
CSS:
div.note-tip {
padding: 10px;
background-color: #fffbea;
color: #646464;
font-size: 10px;
font-family: verdana;
position: fixed;
z-index: 999;
top: 100px;
left: 50%;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
border: 2px #e38008 solid;
max-width: 250px;
max-height: 120px;
overflow: auto;
}
jQuery:
$(document).ready(function () {
$('a.note-tip').mouseover(function(e) {
$('div.note-tip').remove();
var tip = $(this).attr('note');
$('body').append('<div class="note-tip">' + tip + '</div>');
$('div.note-tip').css('top', (e.pageY - (30 + $('div.note-tip').height())));
$('div.note-tip').css('left', (e.pageX - (100 + $('div.note-tip').height())));
}).mouseout(function() {
if ($('div.note-tip').height() >= 110) {
$('div.note-tip').mouseout(function() {
$('div.note-tip').remove();
});
} else {
$('div.note-tip').remove();
}
});
});