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

JQuery Tooltip

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
thebradnetwork
Asked:
thebradnetwork
  • 2
  • 2
  • 2
  • +3
1 Solution
 
thebradnetworkAuthor Commented:
Plusone3055, what am I suppose to look at on the link you have provided?
0
 
s8webCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
s8webCommented:
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
 
Michel PlungjanIT ExpertCommented:
I personally use QTIP2
0
 
mgfranzCommented:
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
 
sybeCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
mgfranzCommented:
Nice fix Mike, passing the DOM through the map...  ;-)
0
 
thebradnetworkAuthor Commented:
Qtip was easier for me to work with.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
  • 2
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now