$(function() {
	xOffset = -10;
	yOffset = 10;

	$(".tip").hover(function(e) {
		this.t = this.title;
		this.title = "";
		$("body").append("<div id='tipl'>" + this.t + "</div>");

			$("#tipl").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").show("fade", "slow");
				
	}, function() {
		this.title = this.t;

		$("#tipl").remove()

	});
	$(".tip").mousemove(function(e) {
		
				var border_top = $(window).scrollTop();
				var border_right = $(window).width();
				var top_pos = e.pageY - xOffset;
				
		
		
		
		
				
		$("#tipl").css("top", top_pos ).css("left", (e.pageX + yOffset) );
		
	});





	$(".tip2").hover(function(e) {
		this.t = this.title;
		this.title = "";
		$("body").append("<div id='tipl2'>" + this.t + "</div>");
		$("#tipl2").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").show("fade", "slow");
	}, function() {
		this.title = this.t;
		$("#tipl2").remove();
	});
	$(".tip2").mousemove(function(e) {
		$("#tipl2").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
	});





	$(".tipstay").hover(function(e) {
		$('#clo').css({
			'cursor' : 'pointer'
		});
		this.t = this.title;
		this.title = "";
		$("body").append("<div id='tipl3'><div align='center' style='font-weight:bold;width:220px;height:20px;background-color:#000;padding-top:5px;border-radius:4px;opacity:0.7;box-shadow:0px 0px 5px #000;border-bottom:1px solid #666'>Wer ist online<div id='clo' class='tip2' title='Close' style='margin-right:10px;float:right;text-indent:1px;border-radius:4px;width:16px;height:16px;background-color:#666;margin-top:-1px'>x</div></div>" + this.t + "</div>");
		$("#tipl3").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").show("fade", "slow");

	}, function() {
		$('#clo').css({
			'cursor' : 'pointer'
		});
		$('#clo').click(function() {
			$("#tipl3").hide('explode', 'slow');
		});
	});
});