Przy nieruchomym kursorze i przesuwających się obrazkach, tooltip z info zmienia lokalizację

Witam.

Przypadkowo zauważyłem taki drobny problem, gdy przy nieruchomym kursorze i przesuwających się obrazkach, tooltip z info zmienia lokalizację. Wygląda to w ten sposób, że przesuwają się powoli obrazki w lewo i gdy najadę kursorem np. na "obrazek nr 3" i zaraz kursor najedzie automatycznie na "obrazek nr 4", to wtedy tooltip z info pojawia się po lewej na dole strony głównej. Tooltip jest przyczepiony do lewej strony i ok 50px od dolnej części strony głównej. Chciałbym, aby ten tooltip przy nieruchomym kursorze np. z obrazka nr 3 na obrazek nr 4 nie zmieniał lokalizacji, tylko pozostał w tym samym miejscu.

<div class="photobanner">
    <div id="photoSlider">
        <div class="photos">
            <img src="obrazki/01.jpg" class="masterTooltip" title="Obrazek nr 01" style="margin-top: 12px" />
            <img src="obrazki/02.jpg" class="masterTooltip" title="Obrazek nr 02" style="margin-top: 12px" />
            <img src="obrazki/03.jpg" class="masterTooltip" title="Obrazek nr 03" style="margin-top: 12px" />
            <img src="obrazki/04.jpg" class="masterTooltip" title="Obrazek nr 04" style="margin-top: 12px" />
            <img src="obrazki/05.jpg" class="masterTooltip" title="Obrazek nr 05" style="margin-top: 12px" />
            <img src="obrazki/06.jpg" class="masterTooltip" title="Obrazek nr 06" style="margin-top: 12px" />
            <img src="obrazki/07.jpg" class="masterTooltip" title="Obrazek nr 07" style="margin-top: 12px" />
            <img src="obrazki/08.jpg" class="masterTooltip" title="Obrazek nr 08" style="margin-top: 12px" />
            <img src="obrazki/09.jpg" class="masterTooltip" title="Obrazek nr 09" style="margin-top: 12px" />
            <img src="obrazki/10.jpg" class="masterTooltip" title="Obrazek nr 10" style="margin-top: 12px" />
        </div>
    </div>
</div>

.tooltip
{
	display: none;
	position: absolute;
	border: 1px solid #2A2A2A;
	border-radius: 5px;
	background-color: #800080;
	color: yellow;
	font-size: 12px;
	padding: 5px;
}

<script type="text/javascript">
	$(document).ready(function() {
		$('.masterTooltip').hover(function() {
			var title = $(this).attr('title');
			$(this).data('tipText', title).removeAttr('title');
			$('<p class="tooltip"></p>')
			.text(title)
			.appendTo('body')
			.fadeIn('slow');
		}, function() {
			$(this).attr('title', $(this).data('tipText'));
			$('.tooltip').remove();
		}).mousemove(function(e) {
			var mousex = e.pageX + 0;
			var mousey = e.pageY + 0;
			$('.tooltip')
			.css({ top: mousey, left: mousex })
		});
	});
</script>

Podejrzewam, że gdzieś jest drobny błąd w zapisie JavaScript. Wiecie co należy poprawić w kodzie, aby było OK?