this.tooltip = function() { xOffset = 20; yOffset = 0; margin = 50; $(".tooltip").hover(function(e) { this.t = this.title; this.title = ""; $("body").append("<div id='tooltip'>" + this.t + "</div>"); $("#tooltip").css("top", -1000 + "px").css("left", -1000 + "px").css("width", $("#tooltip").width() + "px").css("height", $("#tooltip").height() + "px").fadeIn("400") }, function() { this.title = this.t; $("#tooltip").remove() }); $(".tooltip").mousemove(function(e) { var x = e.pageX + xOffset; var y = e.pageY + yOffset; if (x + margin > $('#tooltip').width() && $(window).width() - x - margin < $('#tooltip').width()) x = e.pageX - $("#tooltip").width() - xOffset; if (y + margin > $('#tooltip').height() && $(window).height() - y - margin < $('#tooltip').height()) y = e.pageY - $("#tooltip").height() - yOffset; $("#tooltip").css("top", y + "px").css("left", x + "px") }) }; $(document).ready(function() { tooltip() });