This is a tooltip script that I'm creating for the website i'm making, i'm having some trouble and don't know how to get past the three problems listed below. I've also uploaded the single page with the code and script on it(it's a small script). Any help would be really appreciated, It should be simple, but i'm just stuck.
problems with tooltip: Problem One: The X axis is not correctly centered over the trigger. (I think it's measuring it by the width of the smallest div.popme tooltip on the page. So if i have 2 tooltips on the page, one is 100px in width, and the other is 200px in width, it will measure the "left" value for all of the tooltips on the page with the smallest(100px) tooltip, making the tooltip not appear centered correctly over the trigger.) Problem Two: The tooltip doesn't appear if the content causes the tooltip to reach the max-width of 250px. Problem Three: I want the tooltip to appear above the trigger, but right now the tooltips position above the trigger is measured by the "top" property. I tried replacing "top" with "bottom" but it didn't work (the code for the tooltip positioning was taken from another script). it needs to be measured by the bottom so i can have multiple lines of content within the tooltip and so it doesn't cover the trigger link to show the tooltip. Here's the whole .html page code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[TTS] Tooltip Trial Series</title> <style> p { margin:75px 75px 0 75px;} em { opacity:100; position:absolute;} .tip_trigger { border-bottom:1px #666 solid; color:#09F; font-weight:bold;} .tool_tip { position:absolute; background-color:#252525; padding:10px; color:#ffffff; margin:10px 0 0 0; max-width:250px;} </style> <script type="text/javascript" src="http://code.jquery.com/jquery- latest.pack.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.tool_tip').show().css({'opacity':'0'}); $(".tip_trigger").hover(function(){ var height = $(this).height(); var top = $(this).offset().top; var left = $(this).offset().left + ($(this).width() /2) - ($ ('.tool_tip').width() / 2); $('.tool_tip').css('top',top - 50).css('left',left); $(this).next("em.tool_tip").stop().animate({'opacity':1, 'margin-top': 5}); }, function(){ $(this).next('em.tool_tip').stop().animate({'margin-top':0,'opacity': 0}, 500, function(){ $('em.tool_tip').css({'margin-top':10}); }); }); }); </script> </head> <body> <p> ake them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too! Starting off where we left off last time, we continue exploring the smarteron and going over how that. <span class="tip_trigger">possibilities</span> <em class="tool_tip">FIRST.</em> Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too! Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too! Starting off where we left off last time, we continue exploring the smarter things. We explore a simple variable and an IF/ ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too! Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, <span class="tip_trigger">possibilities</span> <em class="tool_tip">THIS IS THE SECOND.</em> smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and then finish off by writing out own custom function and going over how that layer of abstraction can help us keep our code clean. Semantics counts in JavaScript too! Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit some of the old functions and make them do some smarter things. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and hello of abstraction can help us keep our code clean. Semantics counts in JavaScript too! Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit we all want you to see that what we're doing is the right thing <span class="tip_trigger">and that the mouse jumped</span> <em class="tool_tip">THIS IS THE BOTTOM TOOLTIP</em> over the body. We explore a simple variable and an IF/ELSE statement. Then we look at the AJAX-y .load() function, the CSS function, and hello of abstraction can help us keep our code clean. Semantics counts in JavaScript too! Starting off where we left off last time, we continue exploring the possibilities of jQuery. We revisit we all want you to see that what we're doing is the right thing </p> </body> </html>
