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:-


<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.getElementByI d('<%# 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>


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

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;
}

__________________
Regards,

Sundaram

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

__________________
M.Ramesh Kumar

Hi,
Could try using title property of div tag.
use like this,
<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" title='<%# DataBinder.Eval(Container.DataItem,"CourseID") %>' style="cursor: pointer">
<%# DataBinder.Eval(Container.DataItem,"Description") %>
</div>
<div class="RegCourseName" title='<%# DataBinder.Eval(Container.DataItem,"CourseID") %>' style="cursor: pointer" onmousemove="DescriptionPos(document.getElementByI d('<%# 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>

This will act like tool tip.. No need to give the tooltip text in Id of Div.It wont work.Only give in title property of div...