asp.net 2.0
I have added a gridview to my page as well as created a <div> for my tooltip. I then added the tooltip call to each row of the gridview. It all works except the <div> does not seem to be taking the left and top properties.
When i mouseover a row, the div displays but it displays exaclty where i have the div on the page.
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes.Add("onmouseover", "ShowTooltip('TestMeOut');")
e.Row.Attributes.Add("onmouseout", "HideTooltip();")
End If
End Sub
function ShowTooltip(name){
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop + 10;
Popup.style.display="block";
Popup.style.left = x;
Popup.style.top = y;
}
function HideTooltip(){
Popup.style.display="none";
}
<div id="Popup" style="display: none;background-color: Aqua;" >
TestMeOut
</div>
Like i said the <div> displays onmouse over and hides onmouse out but it is displaying in the exact spot where the code is on the page. Its not taking the top and left properties.
Any Ideas??Well i decided to set the position to absolute and now it works.
But i do have 1 other question if anyone happens to read this.
My data for the gridview is displaying about 25 records. It requires you to scroll down the screen to see the last records. When i do this i get left and top positions of the actual screen. Example i hover over the very last record and i get a x and y of say 450 & 435, so the tool tip displays in that position, only the record is really located at like 950 & 435. But once i scroll the screen down to the bottom it does not account for the screen size that i scrolled. So the tool tip is displaying ( i can only assume) but its displaying at 450 & 435 which is now located off the screen because i have scrolled the screen to say 950 & 435.
ANy idea on how to account for the sreen size that i had to scrool so that no matter where at on the page i am, the tool tip still displays correclty.well since no one else will reply, i will reply.
The problem was w/ this
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop + 10;
Instead of using clientx i used PageX & PageY
I have added a gridview to my page as well as created a <div> for my tooltip. I then added the tooltip call to each row of the gridview. It all works except the <div> does not seem to be taking the left and top properties.
When i mouseover a row, the div displays but it displays exaclty where i have the div on the page.
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes.Add("onmouseover", "ShowTooltip('TestMeOut');")
e.Row.Attributes.Add("onmouseout", "HideTooltip();")
End If
End Sub
function ShowTooltip(name){
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop + 10;
Popup.style.display="block";
Popup.style.left = x;
Popup.style.top = y;
}
function HideTooltip(){
Popup.style.display="none";
}
<div id="Popup" style="display: none;background-color: Aqua;" >
TestMeOut
</div>
Like i said the <div> displays onmouse over and hides onmouse out but it is displaying in the exact spot where the code is on the page. Its not taking the top and left properties.
Any Ideas??Well i decided to set the position to absolute and now it works.
But i do have 1 other question if anyone happens to read this.
My data for the gridview is displaying about 25 records. It requires you to scroll down the screen to see the last records. When i do this i get left and top positions of the actual screen. Example i hover over the very last record and i get a x and y of say 450 & 435, so the tool tip displays in that position, only the record is really located at like 950 & 435. But once i scroll the screen down to the bottom it does not account for the screen size that i scrolled. So the tool tip is displaying ( i can only assume) but its displaying at 450 & 435 which is now located off the screen because i have scrolled the screen to say 950 & 435.
ANy idea on how to account for the sreen size that i had to scrool so that no matter where at on the page i am, the tool tip still displays correclty.well since no one else will reply, i will reply.
The problem was w/ this
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop + 10;
Instead of using clientx i used PageX & PageY