Quick tool tip (State of Rivalry)

gistfile1.html

<style>
#tooltip { padding: 5px; width: auto; min-width:78px; background-color:#fff; border: 2px #ccc solid; position: absolute; top: 50px; z-index:1000; font-size:12px; text-transform:uppercase; text-align:left; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
#tooltip .tip, #tooltip .tip-inner { position: absolute; width:0; height:0; border-top-width: 0; background: none; }
#tooltip .tip { border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #ccc; top: -7px; right: auto; left: 50%; margin-left: -5px; }
#tooltip .tip-inner { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #fff; bottom: auto; top: 2px; left: -4px; }
</style>
<script>
	$(".game").hover( function () {
				$("#tip-wpit").text($(this).attr("data-wpit"));
				$("#tip-lpit").text($(this).attr("data-lpit"));
				$("#tip-spit").text($(this).attr("data-spit"));
				$("#tip-time").text($(this).attr("data-time"));
				$("#tip-spec").text($(this).attr("data-spec"));
				$("#tip-dn").text($(this).attr("data-dn"));
				
				var leftposition = $(this).offset().left;
				var thisw = $(this).width()/2;
				var tipw = $("#tooltip").width()/2;
				var tipx = leftposition + thisw - tipw -4;
				$("#tooltip").css("left", tipx + "px"); 
				
				var tipy = $(this).offset().top + $(this).height() + 8;
				$("#tooltip").css("top", tipy + "px");
		
				$("#tooltip").fadeIn("fast");
			}, function (){
				$("#tooltip").hide();
		 }); 
</script>


<div id="tooltip" >
		<div class="tip">
			<div class="tip-inner"></div>
		</div>
		W: <span id="tip-wpit"></span><br/>
		L: <span id="tip-lpit"></span><br/>
		S: <span id="tip-spit"></span><br/>
		Time of Game: <span id="tip-time"></span> <br/>
		Attendance: <span id="tip-spec"></span> <br/>
		D/N: <span id="tip-dn"></span>
	</div>