Show defintion for GridView column name on mouse hover

Question

The following is the code for my Gridview on the client side.

<asp:GridView ID="gvwClaims" runat="server" AllowPaging="true" PageSize="20"
             OnPageIndexChanging="gvwClaims_PageIndexChanging"
             OnRowDataBound="gvwClaims_RowDataBound"
                RowStyle-CssClass="GridViewRowStyle" HeaderStyle-CssClass="GridViewHeaderRowStyle"
                AlternatingRowStyle-CssClass="GridViewAlternatingRowStyle" AutoGenerateColumns="false"
                BorderStyle="None" CellPadding="2" OnRowCommand="gvwClaims_RowCommand">
                            <HeaderStyle CssClass="GridViewHeaderRowStyle" />
                            <PagerSettings Mode="NumericFirstLast" Position="TopAndBottom" />
                            <PagerStyle CssClass="gridPagerStyle" />
                            <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />
                <Columns>
                    <asp:BoundField DataField="DateFrom" HeaderText="Date">
                        <ItemStyle Width="50" />
                    </asp:BoundField>
                    <asp:TemplateField HeaderText="Number">
                        <ItemTemplate>
                            <asp:LinkButton ID="ClaimLink" runat="server" CommandName="View" CssClass="GridLink"
                                Visible='<%# ((String)Eval("HPType") == "number") %>' Text='<%# Eval("No") %>'></asp:LinkButton><asp:Label
                                    runat="server" ID="NoLink" Visible='<%# ((String)Eval("Type") == "number") %>'
                                    Text='<%# Eval("No") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="Prov" HeaderText="Name">
                        <ItemStyle />
                    </asp:BoundField>
                    <asp:BoundField DataField="PlcSvc" HeaderText="Place">
                        <ItemStyle />
                    </asp:BoundField>
                    <asp:BoundField DataField="HpType" HeaderText="Plan">
                        <ItemStyle />
                    </asp:BoundField>
                    <asp:BoundField DataField="Status" HeaderText="Status" />
                </Columns>
                <EmptyDataTemplate>
                    <div id="pnlEmptyClaims" runat="server" class="NoRecs">
                        <span style="font-style: italic">No recent history is available.</span></div>
                </EmptyDataTemplate>
                            <RowStyle CssClass="GridViewRowStyle" />
            </asp:GridView>

I have a GridView and I want to make the column names intractable.

In the past I have used div elements and css code to change mouse pointer on hover and then an event on mouse click.

But now, I want to use this gridview and when a user hovers on the column name, I want a small bubble to popup with a definition for the column name: for example :- "Date" and "Number" and "Name", etc.

I am thinking about using ajax, jquery techniques.

While I research on the internet, I would appreciate if you any of you have experience with this technique/can point me in the correct direction.

Thanks.

I think this answer applies to your question: http://stackoverflow.com/a/10727278/28327 — Kosta, Nov 25 '13 at 21:45

score 3 · Accepted Answer · answered Nov 25 '13 at 21:54

You can set the ToolTip property of each header column in the RowDataBound event, like this:

protected void gvdetails_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Only do this to the header row, ignore data and footer rows
    if(e.Row.RowType==DataControlRowType.Header)
    {
        e.Row.Cells[0].ToolTip = "Date header tooltip text here";
        e.Row.Cells[1].ToolTip = "Number header tooltip text here";
        e.Row.Cells[2].ToolTip = "Name header tooltip text here";
        e.Row.Cells[3].ToolTip = "Place header tooltip text here";
        e.Row.Cells[4].ToolTip = "Plan header tooltip text here";
        e.Row.Cells[5].ToolTip = "Status header tooltip text here";
    }
}

is there a way to use this in C# to add header text as well ? protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { foreach (TableCell cell in e.Row.Cells) { cell.Attributes.Add("Your Copay", "Testtestest" + cell.Text); } } } — Philo, Nov 27 '13 at 20:25

Show defintion for GridView column name on mouse hover

1 Answers1