Solved

JQuery Tooltips Not working

Posted on 2010-11-18
2
900 Views
Last Modified: 2012-05-10
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
Comment
Question by:error77
2 Comments
 
LVL 6

Accepted Solution

by:
Codebot earned 500 total points
ID: 34163255
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
 

Author Closing Comment

by:error77
ID: 34186093
Thanks
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now