Monday, 22 November 2010

Showing Tooltip with some data from database on mouse over of a GridView column

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.
<?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 &#96;
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("'", "&#96;") + "'," +
        "'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "QuantityPerUnit") as string).Replace("'", "&#96;") + "'," +
        "'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "UnitPrice") as string).Replace("'", "&#96;") + "'," +
        "'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "UnitsInStock") as string).Replace("'", "&#96;") + "'," +
        "'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "UnitsOnOrder") as string).Replace("'", "&#96;") + "'," +
        "'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "ReorderLevel") as string).Replace("'", "&#96;") + "'," +
        "'" + Server.HtmlEncode(DataBinder.Eval(e.Row.DataItem, "Discontinued") as string).Replace("'", "&#96;") + "'" +
        ");");
        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.

  1. 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.
  2. HideToolTip() – Firing to hide the tooltip when the mouse over goes out of the hyperlink control.
  3. 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 -
  1. 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)
  2. Create a HTML script using the data passed thru parameter (which are actually from the database).
  3. Assign the HTML script created in step2 as inner HTML for Div control.
  4. 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.
  1. Directly construct the html script in the JavaScript and assign the script as innerHTML into Div control to show in tooltip.
  2. 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.
  3. 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.
  1. 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 &#96; then ' which encoded in C# code
        sProductName = sProductName.replace("&#96;", "'");
        sQuantityPerUnit = sQuantityPerUnit.replace("&#96;", "'");
        sUnitPrice = sUnitPrice.replace("&#96;", "'");
        sUnitsInStock = sUnitsInStock.replace("&#96;", "'");
        sUnitsOnOrder = sUnitsOnOrder.replace("&#96;", "'");
        sReorderLevel = sReorderLevel.replace("&#96;", "'");
        sDiscontinued = sDiscontinued.replace("&#96;", "'");
    
        // 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";
    }
  2. 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 &#96; then ' which encoded in C# code
        sProductName = sProductName.replace("&#96;", "'");
        sQuantityPerUnit = sQuantityPerUnit.replace("&#96;", "'");
        sUnitPrice = sUnitPrice.replace("&#96;", "'");
        sUnitsInStock = sUnitsInStock.replace("&#96;", "'");
        sUnitsOnOrder = sUnitsOnOrder.replace("&#96;", "'");
        sReorderLevel = sReorderLevel.replace("&#96;", "'");
        sDiscontinued = sDiscontinued.replace("&#96;", "'");
    
        // 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";
    }
  3. 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";
    }
If you run the page you will get the following tool tip from the example I given 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.

6 Responses to “Showing Tooltip with some data from database on mouse over of a GridView column”

  • suman says:
    20 June 2011 at 14:11

    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

  • Thiru says:
    22 June 2011 at 07:48

    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)

  • Ravi Kumar T says:
    15 June 2012 at 22:48

    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

  • Thiru says:
    16 June 2012 at 21:24

    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.

  • Ravi Kumar T says:
    18 June 2012 at 12:39

    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

  • Ravi Kumar T says:
    18 June 2012 at 13:33

    Hi Thiru,

    Sorry for the wrong update,
    it is working fine now.

    Thank you very much,
    Ravi

Post a Comment