$(window).load(function() {
	$('.tooltip_wrapper').each(function() {
		// options
		var vertDistance = 30;		// (px) vertical distance from tooltip to trigger
		var duration = 180;			// (ms) duration of fade-in-effect
		var fadeInDistance = 10;	// (px) distance the tooltip covers when fading in
		
		// selectors
		var $this = $(this);				// save $(this) from being overridden
		var trigger = $('img', $this);		// set the selector to whatever you want to be the trigger
		var tooltip = $('.tooltip', $this);	// set the selector to whatever you want to be the tooltip
		var origOffset = trigger.offset().top - vertDistance;
		var lowerOffset = origOffset - fadeInDistance;
		
		// methods
		var alignTooltip = function() {
			var offsetY = trigger.offset().top - vertDistance;
			var offsetX = trigger.offset().left - ((tooltip.width() / 2) - (trigger.width() / 2));

			tooltip.css({
				top: offsetY.toString() + 'px',
				left: offsetX.toString() + 'px',
				display: 'block'
			});
		}
		
		alignTooltip();
		// re-align tooltip when window gets resized
		$(window).resize(function() {
			alignTooltip();
		});
		
		// bind the hover-event to the trigger
		trigger.hover(function() {
			tooltip.clearQueue();
			
			// lower position of tooltip to make fadeIn-effect look nicer
			tooltip.css({
				top: lowerOffset
			});
			
			tooltip.animate({
				top: origOffset,
				opacity: 1
			}, duration);
			
		}, function() {
			tooltip.clearQueue();
			
			tooltip.animate({
				top: lowerOffset,
				opacity: 0
			}, duration);
			
			tooltip.css({
				top: origOffset
			});
		});
	});
});