Jquery-tools tooltip

encinoman · 11-09-2009, 02:15 AM

I'm trying to dynamically create tooltips that appear when you hover over an image in addition to a gallery overlay. By default the tooltips are set to use the title attr. of the image as the text of the tooltip. Instead of this, I would like to have a static html paragraph of text as the tooltip. I'm not sure how to do this since each tooltip uses the same <div class = pictures>, but I know there must be a way. A workaround would be to use htmlentities and fit that into the title but it doesnt seem very elegant. My code is largely from the examples provided on the website for Jquery tools.

Code:

<?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() {
/* chained call: scrollable().find("a").tooltip().overlay().gallery(); */

$(".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>