Text on star rating

[kvnirvana]

I've got this star rating script, showing 5 stars. How do I get hover text on the stars so if I have mouseover on the first star it says 'bad' and if I have mouseover on the last star it says 'very good' ?

 

<script type="text/javascript">
$(document).ready(function() {
	var star_on = new Image();
	star_on.src = "<{$baseurl}>/design/img/star_on.png";

	var star_off = new Image();
	star_off.src = "<{$baseurl}>/design/img/star_off.png";

	$("img.star").hover(function() {
		var star = $(this);
		var value = star.attr('x:value');

		for(var i=1; i<=5; i++) {
			if (i <= value) {
				$(".star" + i + ".area_" + star.attr('x:area_id')).attr("src", star_on.src);
			}
			else {
				$(".star" + i + ".area_" + star.attr('x:area_id')).attr("src", star_off.src);
			}
		}
	},
	function() {
		var star = $(this);
		var value = $("#area_" + star.attr('x:area_id')).val();
		var area_id = star.attr('x:area_id');

		for(var i=1; i<=5; i++) {
			if (i <= value) {
				$(".star" + i + ".area_" + area_id).attr("src", star_on.src);
			}
			else {
				$(".star" + i + ".area_" + area_id).attr("src", star_off.src);
			}
		}
	});

	$("img.star").click(function() {
		var star = $(this);
		$("#area_" + star.attr('x:area_id')).val(star.attr('x:value'));
	});

	$("#folder").click(function() {
			$(".foldable").toggle();
		}
	);

	});
</script>

 

Thanks in advange

[Adam]

Where exactly do you want the text to appear? Can you show the mark-up you're working with, and point out the element(s) that should have the text?