• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 918
  • Last Modified:

JQuery Tooltips Not working

Hi all,

I'm trying to bare basics of JQuery Tooltips and it just won't work. Anyone got any ideas why the code attached won't work please?
Here is the website url: http://flowplayer.org/tools/demos/tooltip/index.html
Please see my code below attached

Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
	<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
<style>

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}



</style>
<script type="text/javascript">
	$("#demo img[title]").tooltip();
</script>

</head>
<body>


<div id="demo">
	<img src="images.jpeg" title="The tooltip text #1"/>
	<img src="image2.jpg" title="The tooltip text #2"/>
	<img src="image3.jpg" title="The tooltip text #3"/>
	<img src="image4.jpg" title="The tooltip text #4"/>
</div>

</body>
</html>

Open in new window

0
error77
Asked:
error77
1 Solution
 
CodebotCommented:
you need to include both files
<!-- include the Tools -->
      <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
      
 
      <link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>      
 
 or use this one
<!DOCTYPE html> 
 
<html> 
 
<!--
	This is a jQuery Tools standalone demo. Feel free to copy/paste.
	                                                         
	http://flowplayer.org/tools/demos/
	
	Do *not* reference CSS files and images from flowplayer.org when in production  
 
	Enjoy!
--> 
 
<head> 
	<title>jQuery Tools standalone demo</title> 
 
	<!-- include the Tools --> 
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script> 
	 
 
	<!-- standalone page styling (can be removed) --> 
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	
 
 
 
 
<!-- tooltip styling --> 
<style> 
 
/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(/tools/img/tooltip/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}
 
/* style the trigger elements */
#demo img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}
</style> 
</head> 
 
<body> 
 
 
 
<!-- use gif image for IE --> 
<!--[if lt IE 7]>
<style>
.tooltip {
	background-image:url(/tools/img/tooltip/black_arrow.gif);
}
</style>
<![endif]--> 
 
<!-- a couple of trigger elements --> 
<div id="demo"> 
	<img src="http://static.flowplayer.org/tools/img/photos/1.jpg"
		title="A must have tool for designing better layouts and more intuitive user-interfaces."/> 
 
	<img src="http://static.flowplayer.org/tools/img/photos/2.jpg"
		title="Tooltips can be positioned anywhere relative to the trigger element."/> 
 
	<img src="http://static.flowplayer.org/tools/img/photos/3.jpg"
		title="Tooltips can contain any HTML such as links, images, forms, tables, etc."/> 
 
	<img src="http://static.flowplayer.org/tools/img/photos/4.jpg" style="margin-right:0px"
		title="There are many built-in show/hide effects and you can also make your own."/> 
</div> 
 
 
<script> 
 
 
 
$("#demo img[title]").tooltip();
</script> 
 
 
 
</body> 
 
</html> 

Open in new window

0
 
error77Author Commented:
Thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now