Solved

JQuery Tooltip

Posted on 2011-09-30
12
600 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SharePoint and CAML query help 4 26
iframe stay to the left of page 5 30
modify font on ninja form 1 27
Javascript function 3 21
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

738 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