C3rd

jQuery Note ToolTip
Posted: 22 May 2013, 3:50am - Wednesday

Screenshot: note_tip 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();
        }
    });
  });

Back to list
Search
Personal Projects

Free stuff for Everyone!

Pages
Categories
Related Links