function showHelpTip(targetControlId, helpDivId) {
	var distance = 10;
	var time = 250;
	var hideDelay = 500;

	var trigger = $('#' + targetControlId);
	var hideDelayTimer = null;
	// tracker	
	var beingShown = false;
	var shown = false;
	var popup = $('div#' + helpDivId + ' ul');
	$([trigger.get(0), popup.get(0)]).mouseover(function() {
		// stops the hide event if we move from the trigger to the popup element
		trigger.css({ "cursor" : "pointer" });
		
		if (hideDelayTimer) clearTimeout(hideDelayTimer);

		// don't trigger the animation again if we're being shown, or already visible
		if (beingShown || shown) {
			return;
		}
		else {
			beingShown = true;			
			popup.css({
				bottom: -60,
				left: 350,
				display: 'block' // brings the popup back in to view				
			})

			// (we're using chaining on the popup) now animate it's opacity and position
				.animate({
					bottom: '+=' + distance + 'px',
					opacity: 1
				}, time, 'swing', function() {
					// once the animation is complete, set the tracker variables
					beingShown = false;
					shown = true;
				});
		}
	})
				.mouseout(function() {
					// reset the timer if we get fired again - avoids double animations
					if (hideDelayTimer) clearTimeout(hideDelayTimer);

					// store the timer so that it can be cleared in the mouseover if required
					hideDelayTimer = setTimeout(function() {
						hideDelayTimer = null;
						popup.animate({
							bottom: '-=' + distance + 'px',
							opacity: 0
						}, time, 'swing', function() {
							// once the animate is complete, set the tracker variables
							shown = false;
							// hide the popup entirely after the effect (opacity alone doesn't do the job)
							popup.css('display', 'none');
						});
					}, hideDelay);
				});
}