Solved

JQuery Tooltip

Posted on 2011-09-30
12
592 Views
Last Modified: 2012-05-12
I am trying to get the following tooltip to work on my site: http://flowplayer.org/tools/demos/tooltip/any-html.html . What I have done is created a coordinate map of the link so that when someone hovers over an object it will display the tooltip. I will have a different tooltip for each object.

I am having a problem getting the tooltip to work at all. It looks to me like the jquery code isnt working correctly.
gear.html
gear.png
0
Comment
Question by:thebradnetwork
  • 2
  • 2
  • 2
  • +3
12 Comments
 
LVL 22

Expert Comment

by:plusone3055
ID: 36893474
0
 
LVL 6

Author Comment

by:thebradnetwork
ID: 36895397
Plusone3055, what am I suppose to look at on the link you have provided?
0
 
LVL 16

Expert Comment

by:s8web
ID: 36900405
You will probably get more useful advice if you provide a link to where this code is running. You could be here a very long time if you don't provide an actual example of your code and environment.


0
 
LVL 16

Expert Comment

by:s8web
ID: 36900438
Actually, I think I see the problem.

1. It looks like you are including jquery, not jquery tools.  Download jquery tools and include it (make sure you configure it with all the things you need before you download it, they roll it up the way you need it). In the snippet I'm pasting, replace /path/to/jquerytools.js with the actual path.

2. The way you're invoking it isn't correct. You need to use a document ready function. I've corrected this in the snippet.

Nice gear by the way.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
/* trigger button */
#download_now {
	background:transparent url(/img/home/download.png) no-repeat scroll 0 0;
	display:block;
	height:44px;
	margin-bottom:30px;
	overflow:hidden;
	text-indent:-999em;
	width:159px;
	cursor:pointer;
}

/* mouseover state */
#download_now:hover {
	background-position:0 -44px ;		
}

/* clicked state */
#download_now:focus {
	background-position:0 -88px;
}

/* tooltip styling */
.tooltip {
	display:none;
	background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
	height:163px;
	padding:40px 30px 10px 30px;
	width:310px;
	font-size:11px;
	color:#fff;
}

/* a .label element inside tooltip */
.tooltip .label {
	color:yellow;
	width:35px;
}

.tooltip a {
	color:#ad4;
	font-size:11px;
	font-weight:bold;
}
</style>

<script type="text/javascript" src="path/to/jquerytools.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#download_now").tooltip({ effect: 'slide'})
		});
</script>

</head>

<body>


<img src="file://localhost/Users/bradhenderson/Desktop/Gear%20Page/gear.png" width="1000" height="782" border="0" usemap="#Map" />
<map name="Map" id="Map">
<div id="download_now">  <area shape="poly" coords="702,728,692,695,695,664,705,640,716,617,723,593,724,577,721,551,711,516,715,471,724,460,732,457,736,451,744,466,746,481,750,502,762,513,770,511,774,492,778,424,784,226,773,218,765,207,755,207,751,198,750,188,758,160,760,143,766,119,777,113,786,116,799,105,814,105,825,112,830,125,822,137,815,139,817,150,821,170,826,193,822,204,810,210,812,537,818,551,831,548,843,537,849,523,860,514,870,520,876,547,872,569,863,589,859,604,867,624,876,646,887,676,890,707,883,725,874,742,860,751,839,756,819,760,780,759,748,754,723,747" href="#" /></div>
  <area shape="poly" coords="610,710,635,713,673,716,697,716,693,700,693,678,695,663,701,647,719,604,720,562,711,520,712,470,729,456,737,450,741,458,745,473,749,495,754,503,762,510,769,507,773,490,782,226,766,209,758,209,747,197,747,184,753,168,758,145,763,122,768,115,780,111,787,114,794,106,801,103,813,103,820,106,826,111,829,120,829,127,816,140,818,146,822,159,823,174,825,185,826,203,811,214,812,537,815,544,818,548,827,547,837,541,842,535,847,523,853,515,862,512,866,515,871,521,876,539,876,548,872,569,867,580,862,593,861,603,866,614,871,632,879,649,885,665,890,678,890,691,890,704,887,718,884,725,944,731,969,730,972,712,979,56,968,52,622,66,612,72" href="#" />
</map>

<div class="tooltip">
	<img src="http://static.flowplayer.org/img/title/eye.png" alt="Flying screens" 
		style="float:left;margin:0 15px 20px 0" />

	<table style="margin:0">
		<tr>
			<td class="label">File</td>
			<td>flowplayer-3.2.7.zip</td>
		</tr>
		<tr>
			<td class="label">Date</td>
			<td>2011-03-03</td>
		</tr>
		<tr>
			<td class="label">Size</td>
			<td>112 kB</td>
		</tr>
		<tr>
			<td class="label">OS</td>
			<td>all</td>
		</tr>		
	</table>

	<a href="/3.2/">What's new in 3.2</a>
</div>
</body>
</html>

Open in new window

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 36900503
I personally use QTIP2
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 18

Expert Comment

by:mgfranz
ID: 36900543
You want to have a tooltip for each guitar in the image?  I don't think this is possible with an image map, your better off splitting the image up into sections and creating a nested div tag for each "object".

As for why your code doesn't work, it's simply because you haven't laid the <img> tag inside a called <div>, that and the fact that you have to match the tooltip to the tag itself.  I have included a working example of your code.  You really should take a look at the documents at the link provided, it will fill in the blanks, including the use of a dynamic tooltip.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/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 the trigger elements */
#demo img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}
</style>

</head>

<body>
&nbsp;
<p />
&nbsp;
<p />
&nbsp;
<p />
&nbsp;
<p />
&nbsp;
<p />
&nbsp;
<p />
<div id="demo">
<img src="images/gear.png" width="1000" height="780" border="0" usemap="#Map" title="Guitars"/>
<map name="Map" id="Map">  <area shape="poly" coords="702,728,692,695,695,664,705,640,716,617,723,593,724,577,721,551,711,516,715,471,724,460,732,457,736,451,744,466,746,481,750,502,762,513,770,511,774,492,778,424,784,226,773,218,765,207,755,207,751,198,750,188,758,160,760,143,766,119,777,113,786,116,799,105,814,105,825,112,830,125,822,137,815,139,817,150,821,170,826,193,822,204,810,210,812,537,818,551,831,548,843,537,849,523,860,514,870,520,876,547,872,569,863,589,859,604,867,624,876,646,887,676,890,707,883,725,874,742,860,751,839,756,819,760,780,759,748,754,723,747" href="#" />
  <area shape="poly" coords="610,710,635,713,673,716,697,716,693,700,693,678,695,663,701,647,719,604,720,562,711,520,712,470,729,456,737,450,741,458,745,473,749,495,754,503,762,510,769,507,773,490,782,226,766,209,758,209,747,197,747,184,753,168,758,145,763,122,768,115,780,111,787,114,794,106,801,103,813,103,820,106,826,111,829,120,829,127,816,140,818,146,822,159,823,174,825,185,826,203,811,214,812,537,815,544,818,548,827,547,837,541,842,535,847,523,853,515,862,512,866,515,871,521,876,539,876,548,872,569,867,580,862,593,861,603,866,614,871,632,879,649,885,665,890,678,890,691,890,704,887,718,884,725,944,731,969,730,972,712,979,56,968,52,622,66,612,72" href="#" />
</map>
</div>

<script>
$("#demo img[title]").tooltip();
</script>

</body>
</html>

Open in new window

0
 
LVL 28

Expert Comment

by:sybe
ID: 36901709
Why don't you add  a "title" attribute to the <area> tags in the image map?
No need for jquery.

Not sure what kind of text you want to display, but the "title" attribute is problematic for multiple lines.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 36902344
Have a  look at this - you wrapped the area tags in illegal divs
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style>
.tooltip {
	display:none;
	top:200px;
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:teal;	
	background: white;
	border:1px solid green;
}
</style>
<script>
$(document).ready(function() {
  var parms = {
 // tweak the position
    position: "center right",
    offset: [-50, -80],
// use the "slide" effect
    effect: 'slide'
  };  
  $("#spade").tooltip(parms);
  $("#box").tooltip(parms);
});
</script>

</head>

<body>

<div>
<img src="gear.png" width="1000" height="782" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" id="box" title="What a great speaker" coords="702,728,692,695,695,664,705,640,716,617,723,593,724,577,721,551,711,516,715,471,724,460,732,457,736,451,744,466,746,481,750,502,762,513,770,511,774,492,778,424,784,226,773,218,765,207,755,207,751,198,750,188,758,160,760,143,766,119,777,113,786,116,799,105,814,105,825,112,830,125,822,137,815,139,817,150,821,170,826,193,822,204,810,210,812,537,818,551,831,548,843,537,849,523,860,514,870,520,876,547,872,569,863,589,859,604,867,624,876,646,887,676,890,707,883,725,874,742,860,751,839,756,819,760,780,759,748,754,723,747" href="#" />
<area shape="poly" id="spade" title="Cool guitar" coords="610,710,635,713,673,716,697,716,693,700,693,678,695,663,701,647,719,604,720,562,711,520,712,470,729,456,737,450,741,458,745,473,749,495,754,503,762,510,769,507,773,490,782,226,766,209,758,209,747,197,747,184,753,168,758,145,763,122,768,115,780,111,787,114,794,106,801,103,813,103,820,106,826,111,829,120,829,127,816,140,818,146,822,159,823,174,825,185,826,203,811,214,812,537,815,544,818,548,827,547,837,541,842,535,847,523,853,515,862,512,866,515,871,521,876,539,876,548,872,569,867,580,862,593,861,603,866,614,871,632,879,649,885,665,890,678,890,691,890,704,887,718,884,725,944,731,969,730,972,712,979,56,968,52,622,66,612,72" href="#" />
</map>
</div>
</body>
</html>

Open in new window

0
 
LVL 18

Expert Comment

by:mgfranz
ID: 36904154
Nice fix Mike, passing the DOM through the map...  ;-)
0
 
LVL 6

Author Closing Comment

by:thebradnetwork
ID: 36911377
Qtip was easier for me to work with.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

910 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

16 Experts available now in Live!

Get 1:1 Help Now