Всплывающие подсказки для мобильных устройств?

Порекомендуйте, пожалуйста, легкий простой скрипт для всплывающих подсказок с поддержкой мобильных устройств.

Подсказки нужны для картинок.

Нужно выводить только текст, но в столбец, а не строку. Т.е.:

One

Two

Three

и т.д.

Обычный title это прекрасно делает, а большинство javascript tooltip, которые находил - нет.

Нижеприведенный код, понимает html в тексте подсказки и позволяет выводить данные столбцом. Прекрасно работает, когда подсказка привязывается к ссылке.

Но если "a" в скрипте меняю на "img", то подсказка появляется только после 2ого наведения... :(

<script type='text/javascript'>

this.tooltip = function(){	

	/* CONFIG */		

		xOffset = 50;

		yOffset = 10;		

		// these 2 variable determine popup's distance from the cursor

		// you might want to adjust to get the right result		

	/* END CONFIG */		

	$("img.tooltip").hover(function(e){											  

		this.t = this.title;

		this.title = "";									  

		$("body").append("<p id='tooltip'>"+ this.t +"</p>");

		$("#tooltip")

			.css("top",(e.pageY - xOffset) + "px")

			.css("left",(e.pageX + yOffset) + "px")

			.fadeIn("fast");		

    },

	function(){

		this.title = this.t;		

		$("#tooltip").remove();

    });	

	$("img.tooltip").mousemove(function(e){

		$("#tooltip")

			.css("top",(e.pageY - xOffset) + "px")

			.css("left",(e.pageX + yOffset) + "px");

	});			

};



// starting the script on page load

$(document).ready(function(){

	tooltip();

});

</script>

           

<style type="text/css">

#tooltip{

	position:absolute;

	border:1px solid #333;

	background:#f7f5d1;

	padding:2px 5px;

	color:#333;

	display:none;

	}

</style>

у картинки, соответственно:

class="tooltip" title="One<br /> Two<br /> Three"