Div not going to correct position :(

How can I get this div to go above the element? :( http://i58.photobucket.com/albums/g268/martynball/ancorpoint.jpg Here is the HTML: <div id="tooltip_container"><div id="690.298" class="tooltip_style_wrapper" style="position: absolute; top: 298px; left: 690px; opacity: 1;"><div class="tooltip_style">Tooltip.</div></div> Sorry for lack of spaces, my computer seems to be bugging up and deciding to ignore me pressing enter. Just needs to be restart. The Div is made with some JavaScript and positioned to the current divs position with this JavaScript: /*
Title: Tool Tip
Auther: Martyn Lee Ball
Version: 1.5

Credits:
- codingforums.com: Old_Pedant
*/

//Listen elements which can display a tooltip
var scanE = Array("img","a","div");

function attachTooltips() {
for ( j = 0; j < scanE.length; j++ ) {
var objs = document.getElementsByTagName(scanE[j]);
for ( var i = 0; i < objs.length; ++i ) {
var elm = objs [ i ];
if ( elm.getAttribute ( 'tooltip' ) == "true" ) {
elm.onmouseover = function() { display_tooltip(this); };
elm.onmouseout = function() { delete_tooltip(this); };
}
}
}
}
/*
Global functions are stored in here as they are needed
for many other functions.
*/

//This function attaches events to elements.
var addEvent = function( elm, evt, fun ) {
if ( elm.addEventListener ) {
elm.addEventListener( evt, fun, false );
} else if ( elm.attachEvent ) {
elm.attachEvent( 'on' + evt, fun );
} else {
elm [ 'on' + evt ] = fun;
}
};
addEvent ( window, "load", attachTooltips );

//This is the name of the style for the tooltip
//The style for the container of this will be the same as this but with _wrapper added on
var s_class = 'tooltip_style';
//This is the height in pixals which the tooltip is raised from the image
var img_tip_height = 5;
//This is the id of the div container which the tooltip's will be created in
var tooltip_container = 'tooltip_container';
//Below are the start and end of the image tag, add styles if you wish, and define the width ect
var imgSt = '<img style=\"display:block; height:80px;\" src=\" ';
var imgEn = '" />';
//Below is the value which is used to raise the tooltip if it contains the image. This value much also be given
//to the style for the tooltip so the img is not bigger than it should be.
var maxIMGheight = 80 /*Don't change value to the right*/ + 6;

function display_tooltip(obj) {
//First of all get the position data for current element
//Also get the message to be displayed- contained in the alt
var data = obj_position(obj);

//Get the position of the element which has been rolled over
var left_pos = data[0];
var top_pos = data[1];
var message = data[2];

//Check to see if tooltip containes link to an image
var image = check_image(message);
if (image[0] == true) {
message = imgSt + image[1] + imgEn + image[2];
var heightAdd = maxIMGheight;
}
else {
heightAdd = 0;
}

var container = document.getElementById(tooltip_container);
var newdiv = document.createElement('div');

newdiv.setAttribute('id',left_pos + "." + top_pos);
newdiv.className = s_class + "_wrapper";
newdiv.innerHTML = "<div class=\""+s_class+"\">" + message + "</div>";

//Position div
newdiv.style.position="absolute";
newdiv.style.top=top_pos - heightAdd +"px";
newdiv.style.left=left_pos+"px";
newdiv.style.opacity=1;

//Append newly created div to container
container.appendChild(newdiv);
}
function check_image(mess) {
//Check for img tags
if (mess.search("-/img/") != -1) {
var img = mess.split("-/img/",2); img2 = img[1].split("-//img/");

var img_data = Array(true, img2[0], img[0]);
return img_data;
} else {
return false;
}
}
function obj_position(obj) {
//Setup variables to hold position values
var x = 0;
var y = 0;
var id = obj.id;

//Give a bit more space if its an image
if ( obj.tagName == "IMG" ) { y = y - img_tip_height; }

while (obj.offsetParent !== null) {
//Get position values and put in variables
x += obj.offsetLeft;
y += obj.offsetTop - 23;
obj = obj.offsetParent;
}

//Get alt content for tooltip
var alt_message = document.getElementById(id).getAttribute('alt');

//Create array containing data
var data=new Array(x,y,alt_message);
return data;
}
// Values for fading
var fadeBy = 10; //Amount to fade by
var fadeTime = 30; //Time in milliseconds to fade.
var ie_counter = 100; //Counter for crappy IE.

function delete_tooltip(obj) {
//Get the ID of the tooltip container
var data = obj_position(obj);

//ID of tooltip which is being faded
var xy_id = data[0] + "." + data[1];
//fade( xy_id );
}

function fade( theID ) {
var div = document.getElementById(theID);

//Object details
var opacity = div.style.opacity * 100 - fadeBy; //Fade (FF)
ie_counter = ie_counter - fadeBy;
var opacity_ie = div.style.filter = "alpha(opacity=" + ie_counter + ")"; //Fade (IE)
if ( opacity <= fadeBy ) opacity = 0; if ( ie_counter <= fadeBy ) ie_couner = 0;
div.style.opacity = opacity / 100;
if ( opacity == 0 || ie_counter == 0 )
{
document.getElementById(tooltip_container).removeChild(div);
ie_counter = 100; //Reset counter for crappy IE
return;
}
setTimeout( "fade('" + theID + "')", fadeTime );
}

Can we have a link to your page?

Erm, I will have to setup another page on a different host as this is an administrator section for a clients website. Gimmi 5.

Here: http://martynleeball.x10hosting.com/development/test.php

function display_tooltip(obj) {
//First of all get the position data for current element
//Also get the message to be displayed- contained in the alt
var data = obj_position(obj);

//Get the position of the element which has been rolled over
var left_pos = data[0];
var top_pos = data[1]-40;
var message = data[2];

See above snippet of your javascript. I used -40, but you can play with this to get it where you like it.

That is all well and all but what if the element hovered over is much bigger so the div is positioned differently, or if there is more text in the tooltip.

Then that value will need to be changed again for that single element :/ There not a different way to do it?

I'm not sure if this is very clean, but one possible method you could use is an invisible element that you preload the text into with the given style attributes for your tooltip. Then, invisibly populate that container and measure its height and pass that into the formula for calculating top position of the tooltip. This is a rough example of how you would do this:

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Test Page</title>
<style type="text/css">
.tooltip_style {
background-color:#1a1a1a;
border-color:#ccc;
border-style:solid;
border-width:0 1px;
color:#fff;
font-family:Calibri;
font-size:12px;
padding:5px;
}
#test_div {
z-index:-999;
max-width:20em;
position:absolute;
top:0;
left:0px;
visibility:hidden;
}
</style>
<script type="text/javascript">
function text_height(text){
test=document.getElementById("test_div");
test.innerHTML=text;
var result=test.clientHeight+' px height';
test.innerHTML="";
return result;
}
function run_me(){
alert("Test 1: "+text_height("Transfer the review to a different catagory is posted to incorrect girl/if should be to questions."));

alert("Test 2: "+text_height("Transfer the review to a different catagory is posted to incorrect girl/if should be to questions. However, I have added some text to this line in order to make it so long that it wraps again and demonstrates the ability of this script to calculate the height of the element after adding text."));
}
</script>
</head>
<body>
<input type="button" value="Go!" onclick="run_me();" />
<div id="test_div" class="tooltip_style"></div>
</body>
</html>

From here you just need to insert/style the test_div element (either dynamically or just plop it into your HTML) and then put this check into the script for display_tooltip so that it runs without the button - then you're pretty much there.

Instead of alerting the result you capture it as a variable and make that number (only negative rather than positive) be your distance rather than the 40px I used earlier. The bonus for this is that it includes padding and borders in calculating the total height of the element so any style changes for the tooltips will not wreck the code.