Tips Tool

tip.js

$(document).ready(function() {
    $(".tip_trigger").hover(function() {
        $("#tip").html($(this).attr("data-tip"));
        $("#tip").show();
    }, function() {
        $("#tip").hide();
    }).mousemove(function(e) {
        var mousex = e.pageX + 20;
        var mousey = e.pageY + 20;
        var tipWidth = $("#tip").width();
        var tipHeight = $("#tip").height();

        var tipVisX = $(window).width() - (mousex + tipWidth);
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) {
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) {
            mousey = e.pageY - tipHeight - 20;
        }
        $("#tip").css({  top: mousey, left: mousex });
    });
});

HTML

<span id="tip" style="color: #fff;background:#1d1d1d;display:none;padding:10px;position:absolute;z-index:1000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:25px;width:500px;"></span>