Solved

JQuery Tooltip

Posted on 2011-09-30
12
597 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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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

How our DevOps Teams Maximize Uptime

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

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

830 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