$(function(){
    $.fn.tooltip = function(option){
        option = $.extend({
            background: "#E4E2BF",
            color: "#6A6A61",
            border: "",
            radius: 5,
            delay: 300,
            element: 'p'
        }, option);
        
        function showToolTip(evt, delay, text){
            $("<div>", {
                id: "Tooltip",
                css: {
                    position: "absolute",
                    left: evt.pageX + 20,
                    top: evt.pageY - 20,
                    padding: "5px",
                    background: option.background,
                    color: option.color,
                    border: option.border,
                    display: "none",
                    "-moz-border-radius": option.radius,
                    "-webkit-border-radius": option.radius,
                    "border-radius": option.radius
                },
                html: text
            })
            .appendTo("body")
            .fadeIn(delay);
        }
        
        return $(this).each(function(){
            var text = $(this).find(option.element).html();
            $(this).bind({
                mouseenter: function(evt){
                    if ($("#Tooltip").css("opacity") != 0) {
                        $("#Tooltip").stop().remove();
                    }
 
                    showToolTip(evt, option.delay, text);
                },
                mouseleave: function(){
                    $("#Tooltip").fadeOut(
                        option.delay,
                        function(){
                            $(this).remove();
                        }
                        );
                },
                mousemove: function(evt){
                    $("#Tooltip").css({
                        left: evt.pageX + 20,
                        top: evt.pageY - 20
                    });
                }
            });
        })
    }
    
    $('#Welcome div').tooltip();
})