Tool Tip Position Problem

[atul]

Hello All,
I have a datagrid with columns as Course, Method, location etc.For simplicity consider course only. Each course has its own discription stored in database. I have to show the discription as a tooltip for corresponding course. Note:- This datagrid rendered inside a <div> tag which is having scroll bar property as 'auto'.
Now the problem is that it is not showing the tool tip at correct position if i move any of the scrollbar(<div> or browser).

//----------------------
html code is follows:-

<div style="OVERFLOW: auto; WIDTH: 580px; HEIGHT: 350px">
<asp:datagrid id="DGridCourse" runat="server" Width="100%" DataKeyField="CourseID">
<columns>
<asp:templatecolumn HeaderText="Course Name">
<itemtemplate>
<!-- This is the Content of the tool tip - style property is currently hidden and changed to 'visible' as soon as move comes over it-->
<div class="RegDescript" id='<%# DataBinder.Eval(Container.DataItem,"CourseID") %>' >
<%# DataBinder.Eval(Container.DataItem,"Description") %>
</div>
<div class="RegCourseName" onmousemove="DescriptionPos(document.getElementById('<%# DataBinder.Eval(Container.DataItem,"CourseID") %>'))"
onmouseover="openDescript(document.getElementById('<%# DataBinder.Eval(Container.DataItem,"CourseID") %>'))"
onmouseout="closeDescript(document.getElementById('<%# DataBinder.Eval(Container.DataItem,"CourseID") %>'))">
<%# DataBinder.Eval(Container.DataItem,"CourseName") %>
</div>
</itemtemplate>
</asp:templatecolumn>
<asp:boundcolumn DataField="Method" HeaderText="Method"></asp:boundcolumn>
</columns>
</asp:datagrid>
</DIV>

//-------------------

function openDescript(obj) {
obj.style.visibility = "visible";
}

function closeDescript(obj) {
obj.style.visibility = "hidden";
}

function DescriptionPos(objTip){
objTip.style.left=event.x+"px";
objTip.style.top=event.y+"px";

}
//---------------------------------------
.RegDescript {
visibility: hidden;
border: 2px solid #688EB3;
color: #003366;
background-color: #FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size: .65em;
width: 300px;
position:absolute;
}

[basti]

Hi,

I have nearly the same problem and I just want to know if you found any solution. Any help would be great.

THX

[jscheuer1]

Positioning of that type needs to take place applied to an absolutely positioned element that lies outside all other elements (except the body) on the page but that is adjusted using the scroll state of both the page and the scrolling element, or whose position is determined by the (mouseover or click) event's coordinates on the page. To be more specific, we would need to see the complete source code and markup. Better yet, a link to your live page.