When we are doing programming with ASP.NET we will be doing considerable job on any data controls. For Example, Freezing the headers, columns, Showing tooltip on a particular column with some other details which is not visible on the grid, showing image as tooltip etc.,
So here in this post, we are going to concentrate on how to show tooltip with some data comes from database on mouse over of a GridView column.
I am taking an example here to show list of Product details in GridView, where the Product Name column is a hyperlink. If the user over the mouse on the hyperlink, system will show a tooltip near by the cursor with some more details of the particular product.
Lets start implementing this requirement now.
First of all we will define the data which required showing in the GridView control. I am taking an xml file for our convenient purpose which contains the products data from northwind table.
I have added a RowDataBound event where I am going to add some client side events for each of the row. The code looks like this.
Before we look into Javascript code, I wish to explain what I am going to do to show the tooltip in my example.
The actual idea I taken to show tooltop is -
I have implemented this by three ways. But these all three differ when the HTML script is generating with the data provided.
The following JavaScript code shows all three functions defined above.
download the working example of the source code in C# here and in VB here
Now how to show an image in the tooltip where the url of the image stored in the database.
Look it this post which concentrate on showing image on tooltip.
So here in this post, we are going to concentrate on how to show tooltip with some data comes from database on mouse over of a GridView column.
I am taking an example here to show list of Product details in GridView, where the Product Name column is a hyperlink. If the user over the mouse on the hyperlink, system will show a tooltip near by the cursor with some more details of the particular product.
Lets start implementing this requirement now.
First of all we will define the data which required showing in the GridView control. I am taking an xml file for our convenient purpose which contains the products data from northwind table.
<?xml version="1.0" encoding="UTF-8" ?> <Products> <Product ProductID = "1" ProductName = "Chai" SupplierName = "Exotic Liquids" CategoryName = "Beverages" QuantityPerUnit = "10 boxes x 20 bags" UnitPrice = "18.00" UnitsInStock = "18.00" UnitsOnOrder = "18.00" ReorderLevel = "18.00" Discontinued = "No" /> <Product ProductID = "2" ProductName = "Chang" SupplierName = "Exotic Liquids" CategoryName = "Beverages" QuantityPerUnit = "24 - 12 oz bottles" UnitPrice = "19.00" UnitsInStock = "19.00" UnitsOnOrder = "19.00" ReorderLevel = "19.00" Discontinued = "No" /> <Product ProductID = "3" ProductName = "Aniseed Syrup" SupplierName = "Exotic Liquids" CategoryName = "Condiments" QuantityPerUnit = "12 - 550 ml bottles" UnitPrice = "10.00" UnitsInStock = "10.00" UnitsOnOrder = "10.00" ReorderLevel = "10.00" Discontinued = "No" /> <Product ProductID = "4" ProductName = "Chef Anton's Cajun Seasoning" SupplierName = "New Orleans Cajun Delights" CategoryName = "Condiments" QuantityPerUnit = "48 - 6 oz jars" UnitPrice = "22.00" UnitsInStock = "22.00" UnitsOnOrder = "22.00" ReorderLevel = "22.00" Discontinued = "No" /> <Product ProductID = "5" ProductName = "Chef Anton's Gumbo Mix" SupplierName = "New Orleans Cajun Delights" CategoryName = "Condiments" QuantityPerUnit = "36 boxes" UnitPrice = "21.35" UnitsInStock = "21.35" UnitsOnOrder = "21.35" ReorderLevel = "21.35" Discontinued = "Yes" /> <Product ProductID = "6" ProductName = "Grandma's Boysenberry Spread" SupplierName = "Grandma Kelly's Homestead" CategoryName = "Condiments" QuantityPerUnit = "12 - 8 oz jars" UnitPrice = "25.00" UnitsInStock = "25.00" UnitsOnOrder = "25.00" ReorderLevel = "25.00" Discontinued = "Yes" /> <Product ProductID = "7" ProductName = "Uncle Bob's Organic Dried Pears" SupplierName = "Grandma Kelly's Homestead" CategoryName = "Produce" QuantityPerUnit = "12 - 1 lb pkgs." UnitPrice = "30.00" UnitsInStock = "30.00" UnitsOnOrder = "30.00" ReorderLevel = "30.00" Discontinued = "No" /> <Product ProductID = "8" ProductName = "Northwoods Cranberry Sauce" SupplierName = "Grandma Kelly's Homestead" CategoryName = "Condiments" QuantityPerUnit = "12 - 12 oz jars" UnitPrice = "40.00" UnitsInStock = "40.00" UnitsOnOrder = "40.00" ReorderLevel = "40.00" Discontinued = "No" /> <Product ProductID = "9" ProductName = "Mishi Kobe Niku" SupplierName = "Tokyo Traders" CategoryName = "Meat/Poultry" QuantityPerUnit = "18 - 500 g pkgs." UnitPrice = "97.00" UnitsInStock = "97.00" UnitsOnOrder = "97.00" ReorderLevel = "97.00" Discontinued = "Yes" /> <Product ProductID = "10" ProductName = "Ikura" SupplierName = "Tokyo Traders" CategoryName = "Seafood" QuantityPerUnit = "12 - 200 ml jars" UnitPrice = "31.00" UnitsInStock = "31.00" UnitsOnOrder = "31.00" ReorderLevel = "31.00" Discontinued = "No" /> </Products>Next. I am taking GridView to show the data. The source of GridView control is defined as below:
<asp:GridView ID="grdViewProducts" runat="server"
AllowPaging="True" AutoGenerateColumns="False" TabIndex="1"
DataKeyNames="ProductID" Width="100%" DataSourceID="XmlDataSource1"
ShowFooter="True" onrowdatabound="grdViewProducts_RowDataBound"
CellPadding="4" ForeColor="#333333" GridLines="None" >
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="Product ID" />
<asp:TemplateField HeaderText="Product Name">
<ItemTemplate>
<asp:HyperLink runat="server" ID="NameHyperlink"
NavigateUrl="#" Text="" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="SupplierName" HeaderText="Supplier" />
<asp:BoundField DataField="CategoryName" HeaderText="Category" />
<asp:BoundField DataField="QuantityPerUnit" HeaderText="Quantity Per Unit"/>
<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="Data/Products.xml"></asp:XmlDataSource>
As you see here, I coded the Product Name as hyperlink as I want to show the tooltip on mouse over of the hyperlink. If you required may change to a label or other controls you want have, but in code behind you required to set the attributes for that object instead of hyperlink (see the event source below).I have added a RowDataBound event where I am going to add some client side events for each of the row. The code looks like this.
//Please Note : In Replace("'", "`") - Here ` (second one) is `
protected void grdViewProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HyperLink NameHyperLink = (HyperLink)e.Row.FindControl("NameHyperlink");
NameHyperLink.Text = DataBinder.Eval(e.Row.DataItem, "ProductName") as string;
NameHyperLink.Attributes.Add("onmouseover", "ShowToolTip(event, " +
"'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "ProductName") as string).Replace("'", "`") + "'," +
"'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "QuantityPerUnit") as string).Replace("'", "`") + "'," +
"'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "UnitPrice") as string).Replace("'", "`") + "'," +
"'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "UnitsInStock") as string).Replace("'", "`") + "'," +
"'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "UnitsOnOrder") as string).Replace("'", "`") + "'," +
"'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "ReorderLevel") as string).Replace("'", "`") + "'," +
"'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "Discontinued") as string).Replace("'", "`") + "'" +
");");
NameHyperLink.Attributes.Add("onmouseout", "HideTooTip(event);");
NameHyperLink.Attributes.Add("onmousemove", "MoveToolTip(event);");
}
}In this event, I am getting the hyperlink object of each row (if you have any other control, get that object here) and adding three client side events.- ShowToolTip() – This event I added to fire then the user over the mouse on the hyperlink (onmouseover event). So I can code to show a tooltip to show the data.
I am passing the database value from this ShowToolTip() function only. So this function accepts 7 parameters which I required to show in the tooltip as per my requirement. - HideToolTip() – Firing to hide the tooltip when the mouse over goes out of the hyperlink control.
- MoveToolTip() – Firing when the user moving cursor on the hyperlink. So the tooltip will get placed near by the cursor again.
Before we look into Javascript code, I wish to explain what I am going to do to show the tooltip in my example.
The actual idea I taken to show tooltop is -
- Create a div control at runtime (Here ID of the control is Fixed. At the first time, the div control will be created with this id. Further time, I will get the div control which created to show on the page)
- Create a HTML script using the data passed thru parameter (which are actually from the database).
- Assign the HTML script created in step2 as inner HTML for Div control.
- Make the Div position as absolute, so I can place the div any places. Adjust the X,Y coordinate of div control to show nearby cursor and visible the div control.
I have implemented this by three ways. But these all three differ when the HTML script is generating with the data provided.
- Directly construct the html script in the JavaScript and assign the script as innerHTML into Div control to show in tooltip.
- Create the layout on the tool tip at design time (pre-design) with html controls as place holder for the values to be assigned at runtime. At the runtime, assign the values comes from the parameter to those html controls and assign the html script to the div to show as tooltip. This is a easy way, because you can design what required to come in the tool tip at design time and see the result once.
- Create the html controls on the JavaScript and add as child control to the Div to show the tooltip. This is little difficult.. but I would prefer this way.
The following JavaScript code shows all three functions defined above.
// For Hiding tool tip
function HideTooTip(event) {
// Getting the Div element which was created dynamically on ShowToolTip function
var divTip = document.getElementById('divTooTip');
if (divTip) {
while (divTip.childNodes.length > 0)
// Removing all child content which are added inside on the Div content
divTip.removeChild(divTip.childNodes[0]);
}
// Invisibling th Div (which removed all child content)
divTip.style.visibility = "hidden";
}
// For moving the tooltip with mouse is moving on the control
function MoveToolTip(event) {
// Verify if the Div content already present?
if (document.getElementById(sTooTipId)) {
// Get the Div content which was invisible on HideTooTip function
var newDiv = document.getElementById(sTooTipId);
if ('pageX' in event) { // all browsers except IE before version 9
var pageX = event.pageX;
var pageY = event.pageY;
}
else { // IE before version 9
var pageX = event.clientX + document.documentElement.scrollLeft;
var pageY = event.clientY + document.documentElement.scrollTop;
}
if (sToolTipPlacement == "Right")
newDiv.style.left = (pageX + 17) + "px";
else // Left
newDiv.style.left = (pageX - (parseInt(newDiv.style.width) + 17)) + "px";
// Portion of div when hide by browser top
if ((pageY - (parseInt(newDiv.style.height) + 3)) < 0)
// Showing below the cursor
newDiv.style.top = pageY + "px";
else
// Showing above the cursor
newDiv.style.top = (pageY - (parseInt(newDiv.style.height) + 3)) + "px";
// Finally visibling the div
newDiv.style.visibility = "visible";
}
}Below is the three ways of constructing the table in div using JavaScript code.- Directly constructing the html script and assigning the innerHTML to Div :
function ShowToolTip(event, sProductName, // Product Name sQuantityPerUnit, // Quantity Per Unit sUnitPrice, // Unit Price sUnitsInStock, // Units In Stock sUnitsOnOrder, // Units On Order sReorderLevel, // Reorder Lever sDiscontinued // Is Discontinued ) { // For showing tool tip //Replacing back if ` then ' which encoded in C# code sProductName = sProductName.replace("`", "'"); sQuantityPerUnit = sQuantityPerUnit.replace("`", "'"); sUnitPrice = sUnitPrice.replace("`", "'"); sUnitsInStock = sUnitsInStock.replace("`", "'"); sUnitsOnOrder = sUnitsOnOrder.replace("`", "'"); sReorderLevel = sReorderLevel.replace("`", "'"); sDiscontinued = sDiscontinued.replace("`", "'"); // Verify if the Div content already present? if (!document.getElementById(sTooTipId)) { // If not create a new Div element var newDiv = document.createElement("div"); // Set the id for the Div element to refer further newDiv.setAttribute("id", sTooTipId); // Add it to the page document.body.appendChild(newDiv); } else // Get the Div content which was invisible on HideTooTip function var newDiv = document.getElementById(sTooTipId); // Here what we are assiging the tooltip innerHTML to Div (newDiv) control // We have to make the html script containing the database data which are comming thro parameter // here we can do any one of the three ways as explained above // Start - Below is the line you required to assign the Html script. // Directly constructing the html script and assigning the innerHTML to Div. newDiv.innerHTML = "<table>" + "<tr><td><b>Product Name :</b></td><td>" + sProductName + "</td></tr>" + "<tr><td><b>Quantity/Unit :</b></td><td>" + sQuantityPerUnit + "</td></tr>" + "<tr><td><b>Unit Price :</b></td><td>" + sUnitPrice + "</td></tr>" + "<tr><td><b>Units In Stock :</b></td><td>" + sUnitsInStock + "</td></tr>" + "<tr><td><b>Units On Order :</b></td><td>" + sUnitsOnOrder + "</td></tr>" + "<tr><td><b>Reorder Level :</b></td><td>" + sReorderLevel + "</td></tr>" + "<tr><td><b>Discontinued :</b></td><td>" + sDiscontinued + "</td></tr>" + "</table>"; // End - newDiv.style.zIndex = 2; newDiv.style.fontFamily = "Calibri"; newDiv.style.fontSize = "8pt"; newDiv.style.padding = "3px"; newDiv.style.backgroundColor = "#A9D0F5"; newDiv.style.border = "solid 1px #08088A"; newDiv.style.width = "240px"; newDiv.style.height = "120px"; // Absolute make the div floating on the screen. newDiv.style.position = "absolute"; if ('pageX' in event) { // all browsers except IE before version 9 var pageX = event.pageX; var pageY = event.pageY; } else { // IE before version 9 var pageX = event.clientX + document.documentElement.scrollLeft; var pageY = event.clientY + document.documentElement.scrollTop; } if (sToolTipPlacement == "Right") newDiv.style.left = (pageX + 17) + "px"; else // Left newDiv.style.left = (pageX - (parseInt(newDiv.style.width) + 17)) + "px"; // Portion of div when hide by browser top if ((pageY - (parseInt(newDiv.style.height) + 3)) < 0) // Showing below the cursor newDiv.style.top = pageY + "px"; else // Showing above the cursor newDiv.style.top = (pageY - (parseInt(newDiv.style.height) + 3)) + "px"; // Finally visibling the div which has the data newDiv.style.visibility = "visible"; } - Creating the layout at design time and assigning the values comes at runtime. The first code shows the html script on the aspx page (note the display property set to none. So it will be invisible on the page at any time) and the second code shows the JavaScript code
<div id="ToolTip" style="display:none"> <table> <tr> <td><b>Product Name :</b></td> <td><div id="lblProductName"></div></td> </tr> <tr> <td><b>Quantity/Unit :</b></td> <td><div id="lblQuantityUnit"></div></td> </tr> <tr> <td><b>Unit Price :</b></td> <td><div id="lblUnitPrice"></div></td> </tr> <tr> <td><b>Units In Stock :</b></td> <td><div id="lblUnitsInStock"></div></td> </tr> <tr> <td><b>Units On Order :</b></td> <td><div id="lblUnitsOnOrder"></div></td> </tr> <tr> <td><b>Reorder Level :</b></td> <td><div id="lblReorderLevel"></div></td> </tr> <tr> <td><b>Discontinued :</b></td> <td><div id="lblDiscontinued"></div></td> </tr> </table> </div>function ShowToolTip(event, sProductName, // Product Name sQuantityPerUnit, // Quantity Per Unit sUnitPrice, // Unit Price sUnitsInStock, // Units In Stock sUnitsOnOrder, // Units On Order sReorderLevel, // Reorder Lever sDiscontinued // Is Discontinued ) { // For showing tool tip //Replacing back if ` then ' which encoded in C# code sProductName = sProductName.replace("`", "'"); sQuantityPerUnit = sQuantityPerUnit.replace("`", "'"); sUnitPrice = sUnitPrice.replace("`", "'"); sUnitsInStock = sUnitsInStock.replace("`", "'"); sUnitsOnOrder = sUnitsOnOrder.replace("`", "'"); sReorderLevel = sReorderLevel.replace("`", "'"); sDiscontinued = sDiscontinued.replace("`", "'"); // Verify if the Div content already present? if (!document.getElementById(sTooTipId)) { // If not create a new Div element var newDiv = document.createElement("div"); // Set the id for the Div element to refer further newDiv.setAttribute("id", sTooTipId); // Add it to the page document.body.appendChild(newDiv); } else // Get the Div content which was invisible on HideTooTipImage function var newDiv = document.getElementById(sTooTipId); // Here what we are assiging the tooltip innerHTML to Div (newDiv) control // We have to make the html script containing the database data which are comming thro parameter // here we can do any one of the three ways as explained above // Start - Below is the line you required to assign the Html script. var browser = navigator.appName; document.getElementById("lblProductName").innerText = sProductName; document.getElementById("lblQuantityUnit").innerText = sQuantityPerUnit; document.getElementById("lblUnitPrice").innerText = sUnitPrice; document.getElementById("lblUnitsInStock").innerText = sUnitsInStock; document.getElementById("lblUnitsOnOrder").innerText = sUnitsOnOrder; document.getElementById("lblReorderLevel").innerText = sReorderLevel; document.getElementById("lblDiscontinued").innerText = sDiscontinued; newDiv.innerHTML = document.getElementById('ToolTip').innerHTML; // End - newDiv.style.zIndex = 2; newDiv.style.fontFamily = "Calibri"; newDiv.style.fontSize = "8pt"; newDiv.style.padding = "3px"; newDiv.style.backgroundColor = "#A9D0F5"; newDiv.style.border = "solid 1px #08088A"; newDiv.style.width = "240px"; newDiv.style.height = "120px"; // Absolute make the div floating on the screen. newDiv.style.position = "absolute"; if ('pageX' in event) { // all browsers except IE before version 9 var pageX = event.pageX; var pageY = event.pageY; } else { // IE before version 9 var pageX = event.clientX + document.documentElement.scrollLeft; var pageY = event.clientY + document.documentElement.scrollTop; } if (sToolTipPlacement == "Right") newDiv.style.left = (pageX + 17) + "px"; else // Left newDiv.style.left = (pageX - (parseInt(newDiv.style.width) + 17)) + "px"; // Portion of div when hide by browser top if ((pageY - (parseInt(newDiv.style.height) + 3)) < 0) // Showing below the cursor newDiv.style.top = pageY + "px"; else // Showing above the cursor newDiv.style.top = (pageY - (parseInt(newDiv.style.height) + 3)) + "px"; // Finally visibling the div which has the data newDiv.style.visibility = "visible"; } - Create the html controls on the JavaScript and add as child control to the Div to show the tooltip.
function ShowToolTip(event, sProductName, // Product Name sQuantityPerUnit, // Quantity Per Unit sUnitPrice, // Unit Price sUnitsInStock, // Units In Stock sUnitsOnOrder, // Units On Order sReorderLevel, // Reorder Lever sDiscontinued // Is Discontinued ) { // For showing tool tip //Replacing back if ` then ' which encoded in C# code sProductName = sProductName.replace("`", "'"); sQuantityPerUnit = sQuantityPerUnit.replace("`", "'"); sUnitPrice = sUnitPrice.replace("`", "'"); sUnitsInStock = sUnitsInStock.replace("`", "'"); sUnitsOnOrder = sUnitsOnOrder.replace("`", "'"); sReorderLevel = sReorderLevel.replace("`", "'"); sDiscontinued = sDiscontinued.replace("`", "'"); // Verify if the Div content already present? if (!document.getElementById(sTooTipId)) { // If not create a new Div element var newDiv = document.createElement("div"); // Set the id for the Div element to refer further newDiv.setAttribute("id", sTooTipId); // Add it to the page document.body.appendChild(newDiv); } else // Get the Div content which was invisible on HideTooTip function var newDiv = document.getElementById(sTooTipId); // Here what we are assiging the tooltip innerHTML to Div (newDiv) control // We have to make the html script containing the database data which are comming thro parameter // here we can do any one of the three ways as explained above // Start - Below is the line you required to assign the Html script. // I am creating total table here with the data placed on it. // Creating the table var mytable = document.createElement("table"); mytable.style.width = "100%"; mytable.style.height = "100%"; // Creating the table body mytablebody = document.createElement("tbody"); //Adding Product Name Info // Creating the row var myrow = document.createElement("tr"); // Creating the cell var mycell = document.createElement("td"); var text = document.createTextNode("Product Name"); mycell.style.fontWeight = "bold"; // Adding the text to cell mycell.appendChild(text); // Adding the cell to row myrow.appendChild(mycell); mycell = document.createElement("td"); text = document.createTextNode(sProductName); mycell.appendChild(text); myrow.appendChild(mycell); // Adding Product Name row to table body mytablebody.appendChild(myrow); //Adding Quantity/Unit Info myrow = document.createElement("tr"); mycell = document.createElement("td"); text = document.createTextNode("Quantity/Unit"); mycell.style.fontWeight = "bold"; mycell.appendChild(text); myrow.appendChild(mycell); mycell = document.createElement("td"); text = document.createTextNode(sQuantityPerUnit); mycell.appendChild(text); myrow.appendChild(mycell); mytablebody.appendChild(myrow); //Adding Unit Price Info myrow = document.createElement("tr"); mycell = document.createElement("td"); text = document.createTextNode("Unit Price"); mycell.style.fontWeight = "bold"; mycell.appendChild(text); myrow.appendChild(mycell); mycell = document.createElement("td"); text = document.createTextNode(sUnitPrice); mycell.appendChild(text); myrow.appendChild(mycell); mytablebody.appendChild(myrow); //Adding Units In Stock Info myrow = document.createElement("tr"); mycell = document.createElement("td"); text = document.createTextNode("Units In Stock"); mycell.style.fontWeight = "bold"; mycell.appendChild(text); myrow.appendChild(mycell); mycell = document.createElement("td"); text = document.createTextNode(sUnitsInStock); mycell.appendChild(text); myrow.appendChild(mycell); mytablebody.appendChild(myrow); //Adding Units On Order Info myrow = document.createElement("tr"); mycell = document.createElement("td"); text = document.createTextNode("Units On Order"); mycell.style.fontWeight = "bold"; mycell.appendChild(text); myrow.appendChild(mycell); mycell = document.createElement("td"); text = document.createTextNode(sUnitsOnOrder); mycell.appendChild(text); myrow.appendChild(mycell); mytablebody.appendChild(myrow); //Adding Reorder Level Info myrow = document.createElement("tr"); mycell = document.createElement("td"); text = document.createTextNode("Reorder Level"); mycell.style.fontWeight = "bold"; mycell.appendChild(text); myrow.appendChild(mycell); mycell = document.createElement("td"); text = document.createTextNode(sReorderLevel); mycell.appendChild(text); myrow.appendChild(mycell); mytablebody.appendChild(myrow); //Adding Discontinued Info myrow = document.createElement("tr"); mycell = document.createElement("td"); text = document.createTextNode("Discontinued"); mycell.style.fontWeight = "bold"; mycell.appendChild(text); myrow.appendChild(mycell); mycell = document.createElement("td"); text = document.createTextNode(sDiscontinued); mycell.appendChild(text); myrow.appendChild(mycell); mytablebody.appendChild(myrow); mytable.appendChild(mytablebody); newDiv.appendChild(mytable); // End - newDiv.style.zIndex = 2; newDiv.style.fontFamily = "Calibri"; newDiv.style.fontSize = "8pt"; newDiv.style.padding = "3px"; newDiv.style.backgroundColor = "#A9D0F5"; newDiv.style.border = "solid 1px #08088A"; newDiv.style.width = "240px"; newDiv.style.height = "130px"; // Absolute make the div floating on the screen. newDiv.style.position = "absolute"; if ('pageX' in event) { // all browsers except IE before version 9 var pageX = event.pageX; var pageY = event.pageY; } else { // IE before version 9 var pageX = event.clientX + document.documentElement.scrollLeft; var pageY = event.clientY + document.documentElement.scrollTop; } if (sToolTipPlacement == "Right") newDiv.style.left = (pageX + 17) + "px"; else // Left newDiv.style.left = (pageX - (parseInt(newDiv.style.width) + 17)) + "px"; // Portion of div when hide by browser top if ((pageY - (parseInt(newDiv.style.height) + 3)) < 0) // Showing below the cursor newDiv.style.top = pageY + "px"; else // Showing above the cursor newDiv.style.top = (pageY - (parseInt(newDiv.style.height) + 3)) + "px"; // Finally visibling the div which has the data newDiv.style.visibility = "visible"; }
javascript error throw var CurX = (window.Event) ? e.pageX :
event.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft); // X is undefined
Pls Help
Hi Suman,
I corrected that bug and updated the same code. When I was done the code, I tested with IE 6.0. But when I test the same now with IE 9.0 given error. Now this code works with IE 9.0, Chrome, Opara (but Firefox still some issue - I will correct soon)
Hi Thiru,
Thanks for sharing the information,
Can you please let me know, how to get this run on FireFox, It is running fine on IE and Chrome, but not with Firefox.
Thanks in advance,
Ravi
Hi Ravi,
I have changed the code and now the code will work perfectly with IE, Chrome, Firefox. I did not tested other browser, but it should work.
Hi Thiru,
Thanks for reply.
I have tested the same but it is still not working for Mozilla (Version 13.0.1 or before versions). working fine for IE and Chrome.
Could you please recheck once, if you missed anything.
Thanks,
Ravi
Hi Thiru,
Sorry for the wrong update,
it is working fine now.
Thank you very much,
Ravi