show qtip/toolip on gridview with dynamic data

I am trying to show qtip or any other way to show tooltip on a asp.net gridview with data from database.

I have qtip working with buttons on the page on title, and am not sure how to do it for hover of each cell on gridview(here is my code for button).

$('input[title]').qtip({
                content: {
                },
                position: {
                    corner: {
                        target: 'bottomRight',
                        tooltip: 'topLeft'
                    }
                },
                style: {
                    name: 'cream',
                    padding: '7px 13px',
                    width: {
                        max: 210,
                        min: 0
                    },
                    tip: true,
                    'color': '#666666'
                }
            });

Also not sure how to call a function from behind the code in qtip and pass my row ID to it.

The grid is a normal grid with databound columns, as below:

<asp:GridView ID="gvmygrid" runat="server" AllowPaging="false" AllowSorting="true"
                            AutoGenerateColumns="false" GridLines="None">
                            <Columns>
                                <asp:BoundField DataField="firstColumn" HeaderText="Col1" ReadOnly="true" />
                                <asp:BoundField DataField="Type" HeaderText="Type" ReadOnly="true" />
 </Columns>
 </asp:GridView>

Solution

1) Create a template item for the grid view column(s) which you need the tooltip to be displayed for and give it an ID so it can be referenced from javascript.

2) I don't know how you're planning to get the data from the DB so I've implemented a simple jQuery web service call which passes through the id of the cell the user is hovering over and returns test data from the WS call

ASPX:

<head runat="server">
    <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("table[id*=gvCustomers] span[id*=nationality]").tooltip({
                delay: 0,
                offset: [-65, -110],
                position: 'center top',
                bodyHandler: function () {
                    var id = $(this).closest("tr").find("span[id*=nationality]").text();
                    $.ajax({
                        type: "POST",
                        dataType: "text",
                        url: "CustomerService.asmx/GetNationality",
                        data: { nationalityId: id },
                        success: function (msg) {
                            $("#tool").html(msg);
                        },
                        error: function (err) {
                            alert("Web service call failed");
                        }
                    });
                   return $("<span id='tool' style='width:200px;background-color:black;color:white;' />");
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" DataSourceID="customersDS">
            <Columns>
            <asp:BoundField DataField="Name" HeaderText="Customer Name" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label runat="server" ID="nationality" Text='<%# Bind("NationalityId") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="customersDS" runat="server" ConnectionString="<%$ ConnectionStrings:connection %>"
            SelectCommand="SELECT [NationalityId], [Name] FROM [Customers]"></asp:SqlDataSource>
    </form>
</body>

ASMX:

public class CustomerService : System.Web.Services.WebService
{
    [WebMethod]
    public string GetNationality(int nationalityId)
    {
        return nationalityId == 1 ? "Nationality1" : "Nationality2";
    }
}

The following articles may also be helpful:

jQuery tooltip with Ajax tooltip datasource with gridview

Using The JQuery Tooltip Plugin in a GridView