Help in tool tip alignment in Gridview
-
Hi all, I have a gridview on my form with 5 columns. One of the field contains item name along with an small icon image. On mouseover of that image i have to show the specification of that item. The specification is in a hidden column of the gridview. For this i wrote the following code: Dim specimg As System.Web.UI.WebControls.Image = CType(e.Row.FindControl("Item_Spec"), System.Web.UI.WebControls.Image) specimg.Attributes.Add("onmouseover", "Show_ToolTip(event,'" + HttpUtility.HtmlDecode(msg.Replace("'", "\'")) + "')") Javascript: function Show_ToolTip(e,myString) { var regX = /\\n/g; var replaceString = '<br> \\n'; myString=myString.replace(/^\s\s*/, '').replace(/\s\s*$/, ''); myString=myString==""? "No Specification": myString; text= myString.replace(regX, replaceString) document.getElementById("Tip_Label").innerText=text; x = event.clientX + document.body.scrollLeft; y = event.clientY + document.body.scrollTop ; document.getElementById("Tool_Tip").style.display="block"; document.getElementById("Tool_Tip").style.left = x; document.getElementById("Tool_Tip").style.top = y; } HTML: <div id="Tool_Tip" style="position: absolute; z-index: 130" class="tip"> <label id="Tip_Label"> </label> </div> But when i hover over the image the tooltip doesn`t always appear below the image and some times appers very far away on the top of the page. What is it that i need to change so that my tooltip always appears just below the image ???
When you fail to plan, you are planning to fail.