Solved

JQuery Tooltip

Posted on 2011-09-30
12
596 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
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 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
 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
age from date of birth 4 42
Passport Expiry 3 46
Why a span is lower 2 21
how can i make 2 columns? 4 22
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

803 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