//this is the offset when the tip diplays over the top of the element
//a good nr for this is the sum of: the border width + the padding (top/bottom) + margin (top/bottom)
var flip_height_offset = 14;  
//move the tip xx to the left (or if the nr is negative to the right)
var left_offset = 0;
//the list of tips
var tips= {
	0: { head: 'Villa Ref', text: 'If you know the villa you want to stay in type it here. The other search options will be ignored.' }
};

$(function(){
	$("*[tip]").mouseenter( function(){
		obj = $(this); 
		tip = $("#tooltip");
		offset = obj.offset();
		
		tiptext = tips[ obj.attr("tip") ];
		tip.html( '<strong>' + tiptext.head + '</strong><br />' + tiptext.text  );
		
		tiptop = offset.top + obj.height() - $(document).scrollTop(); 
		if(( tiptop + tip.height() ) > $(window).height() ){
			tiptop = offset.top - ( tip.height() + flip_height_offset + $(window).scrollTop() );
		}
		tip.css({top: tiptop, left: offset.left + left_offset} ).fadeIn(150);
	}).mouseleave( function(){
		$("#tooltip").hide();
	});
});