More than a few of us are having problems with using dynamic content and tooltips. A workaround is to use htmlentities(title) and in place of an img[title], but this is lame. The problem arises mainly when something like an overlay is used in addition to the tooltip, hence it becomes hard to put straight html into the tooltip because of <div> placement. The following code is modified example code. I am trying to get the tooltip to update with each image in a non-scrollable gallery, not just it's title and im not sure where to put the "demotip" div. 


<?php 
include 'dbc.php';
page_protect();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>
	
	

	<title>MY ACCOUNT</title>

	
	

	<script type = "text/javascript" src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>

	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-basic.css"/>
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/overlay-gallery.css"/>
	<style type="text/css">

.items img {
	margin:0;

}

.items a {
	display:block;
	float:left;
	margin:20px 15px;

} 

#tooltip {
	display:none;
	background:url(images/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;
}

#gallery .disabled {
	visibility:visible !important;
}

#gallery .inactive {
	visibility:hidden !important;
}
	.pictures {
	background-color: #E4F8FA;
	padding: 10px;
	width: 60%;
	height: 20em;
	position: center;
	* {
	margin: 0;
	padding: 0;
	border: 0;

		

</style>
</head>

<body>
<div id = "text">
Testing Testing Testing
</div>

<div class="pictures">

	<!-- root element for the items -->
	<div class="items">

		<a id = "test" href="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg" title="Back view">
			<img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" alt= "none" /></a>

		 <a href="http://farm4.static.flickr.com/3275/2765571978_43771e81eb.jpg" title="From south north">

			<img src="http://farm4.static.flickr.com/3275/2765571978_43771e81eb_t.jpg" alt= "none" /></a>

		<a href="http://farm1.static.flickr.com/79/244441862_08ec9b6b49.jpg" title="View from the pool">
			<img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" alt= "none"/></a>

		<a href="http://farm1.static.flickr.com/28/66523124_b468cf4978.jpg" title="Granite stones">
			<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" alt= "none"/></a>

		<a href="http://farm1.static.flickr.com/164/399223606_b875ddf797.jpg" title="The bronze statue">
			<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" alt= "none"/></a>

		<a href="http://farm2.static.flickr.com/1083/1118933512_5ea1fe8f41.jpg" title="Marble walls">
			<img src="http://farm2.static.flickr.com/1083/1118933512_5ea1fe8f41_t.jpg" alt= "none"/></a>

		<a href="http://farm1.static.flickr.com/135/321464104_c010dbf34c.jpg" title="Statue again">
			<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" alt= "none"/></a>

		<a href="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg" title="Monumental walls">
			<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_t.jpg" alt= "none"/></a>

		<a href="http://farm1.static.flickr.com/153/399232237_6928a527c1.jpg" title="Water view">

			<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" alt= "none"/></a>

		<a href="http://farm1.static.flickr.com/50/117346182_1fded507fa.jpg">
			<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" alt= "none"/></a>
			

			</div>

		</div>

<div id="tooltip"></div>
<!-- "next page" action -->
<a class="nextPage browse right"></a>

<br clear="all" />

<!-- overlay element -->
<div class="simple_overlay" id="gallery">

	<!-- "previous image" action -->

	<a class="prev">prev</a>

	<!-- "next image" action -->
	<a class="next">next</a>

	<!-- image information -->
	<div class="info"></div>

	<!-- load indicator (animated gif) -->

	<img class="progress" src="http://static.flowplayer.org/tools/img/overlay/loading.gif" alt = "none" />
</div>

<!-- javascript coding -->
<script type="text/javascript">

$(document).ready(function() {

$(".pictures").find("a").tooltip({

	// use this single tooltip element for all trigger elements
	tip: '#tooltip'

}).overlay({

	target: '#gallery',

	expose: '#111',

	closeOnClick: false

}).gallery({

	disabledClass: 'inactive'
});
});
</script>

</body>
</html>