[jQuery] Having Problems with my tooltip script. any help?

[jQuery] Having Problems with my tooltip script. any help?


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>


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
























































</body>
</html>