I have a grid of thumnail images and I want the tooltip to appear over(not above, but rather in place of the image) on rollover. Simmilar to how it works on this site: http://lifeandtimes.com/

I have tried commenting out what I think was the javascript to reposition it, but it doesn't work. Can someone help me figure this out.

Here is my .js file
Code:
$(document).ready(function(e) { 
	$('.tooltip').hide();
	$('.trigger').mouseover(function() {
		var ttLeft,
		    ttTop,
			$this=$(this),
			$tip = $($this.attr('data-tooltip')),
			$tip = $($this.attr('title')),
		    triggerPos = $this.offset(),
		    triggerH = $this.outerHeight(),
		    triggerW = $this.outerWidth(),
			tipW = $tip.outerWidth(),
		    tipH = $tip.outerHeight(),
		    screenW = $(window).width(),
			scrollTop = $(document).scrollTop();
		
		// if (triggerPos.top - tipH - scrollTop > 0 ) {
		// 	ttTop = triggerPos.top - tipH - 10;
		// } else {
		// 	ttTop = triggerPos.top + triggerH +10 ;			
		// }
		
		// var overFlowRight = (triggerPos.left + tipW) - screenW;	
		// if (overFlowRight > 0) {
		// 	ttLeft = triggerPos.left - overFlowRight - 10;	
		// } else {
		// 	ttLeft = triggerPos.left;	
		// }
		
		
		$tip
		   .css({
			left : ttLeft ,
			top : ttTop,
			position: 'absolute'
		    })
			.fadeIn(600);
	}); // end mouseover
	$('.trigger').mouseout(function () {
		
		$('.tooltip').fadeOut(600);

	}); // end mouseout
}); // end ready
here is my html for that section
Code:
<div class='video_box'>
     
     <div class='trigger' title='#tip2'>
		<a href='videos.php?vid_id=2'>
		        <img src='video_thumbs/avengers.png'>
		</a>
     </div> <!-- close trigger -->

     <div class='tooltip' id='tip2'>
	   <h2>Avengers</h2>
	   <hr>
	   <p>Trailer for the new Avengers Movie</p>
	   <hr>
	   <p><span>65 % Green Light</span></p>
      </div> <!-- close tool tip -->

</div> <!-- close video box -->
here is my css
Code:
.trigger {
	cursor : help;
	border-bottom: 1px dashed white;	
}
.trigger:hover {
	color: rgb(255,0,0);
}

.tooltip {
	z-index:10000;
	width: 187px;
	height: 120px;
	padding: 0px;
	background-color: white;
	/*border: 3px solid rgb(195,151,51);
	border-radius : 5px;*/	
}

.tooltip h2 {
	
}
.tooltip p {
	color: black !important;	
}

.tooltip span {
	color: green;	
}

.main {
width: 800px;	
}