Using tooltips in dynamically generated lists Created Nov 8, 2009

Hi. Excellent tools, thanks! What I want to do is display a tool tip for each item in a dynamically generated list. Since I dont want to put the function itself in the loop to clutter upp my html i just need a function at the bottom that can (possibly) take an ID and display a tooltip for that object on the page, right to the left of it.

I have done a test. This partially works but the tooltip wont appear until the second time you mouse over it.

Any help och using tooltip in dynamically generated loops is greatly appreciated!

<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>
<style>
.visible {
	width:200px;
	height:30px;
	padding:10px;
	border:1px solid;
	margin:10px;
	float:left;
}

.tooltip {
	display:none;
	background-color:#333333;
	height:50px;
	width:100px;
	font-size:11px;
	color:#fff;
	border:1px solid;
}
</style>
	<div onMouseOver="tooltip(1);" id="test1" class="visible">1</div>
	<div class="tooltip">1</div>
	<div onMouseOver="tooltip(2);" id="test2" class="visible">2</div>
	<div class="tooltip">2</div>
	<div onMouseOver="tooltip(3);" id="test3" class="visible">3</div>

	<div class="tooltip">3</div>
	<div onMouseOver="tooltip(4);" id="test4" class="visible">4</div>
	<div class="tooltip">4</div>
	<div onMouseOver="tooltip(5);" id="test5" class="visible">5</div>
	<div class="tooltip">5</div>
	<div onMouseOver="tooltip(6);" id="test6" class="visible">6</div>

	<div class="tooltip">6</div>
	<div onMouseOver="tooltip(7);" id="test7" class="visible">7</div>
	<div class="tooltip">7</div>
	<div onMouseOver="tooltip(8);" id="test8" class="visible">8</div>
	<div class="tooltip">8</div>
	<div onMouseOver="tooltip(9);" id="test9" class="visible">9</div>

	<div class="tooltip">9</div>
	<div onMouseOver="tooltip(10);" id="test10" class="visible">10</div>
	<div class="tooltip">10</div>
<script>
function tooltip(nr){
var tip="#test"+nr;
	$(tip).tooltip({
	 position: "center left",
	 lazy: "false",
     delay: 300 
	 });
}
</script>