ASP.net Tooltip in template column header

Murray Brown
Murray Brown used Ask the Experts™
on
Hi

In ASP.net I need to have a tooltip for the header of a GridView template column. Not for the gridview cells but for the header.

           <Columns>
                            <asp:TemplateField HeaderText="ID" SortExpression="ID" >
                                <ItemTemplate>
                                    <asp:Label ID="lblID" runat="server" Text='<%# Bind("[ID]")%>' ToolTip="ID"></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Ryan ChongSoftware Team Lead

Commented:
you already got the tooltip since you have the code below:

<asp:Label ID="lblID" runat="server" Text='<%# Bind("[ID]")%>' ToolTip="ID"></asp:Label>

to make a better tooltip effect, you may have a look for

Bootstrap Tooltips
https://getbootstrap.com/docs/4.3/components/tooltips/
Murray BrownASP.net/VSTO Developer

Author

Commented:
That is in the label. I want a different tooltip to pop up when you hover over the header
Software Team Lead
Commented:
put further a bit of effort and we can create the effect.

Untitled.jpg
at your web page, add:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Open in new window


and then add:

<script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    </script>

Open in new window


add your GridView, add the OnRowDataBound event, such as:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">

Open in new window


finally at code behind, add:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                TableCellCollection cell = e.Row.Cells;
                cell[0].Attributes.Add("data-toggle", "tooltip");
                cell[0].Attributes.Add("data-placement", "top");
                cell[0].Attributes.Add("title", "your Tooltip is here...");

                cell[1].Attributes.Add("data-toggle", "tooltip");
                cell[1].Attributes.Add("data-placement", "top");
                cell[1].Attributes.Add("title", "your Tooltip is here... 2");
            }

        }

Open in new window

OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

Hi
There are many ways to do this:

1.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        foreach (TableCell cell in e.Row.Cells)
        {
            cell.Attributes.Add("title", "This is tooltip for " + cell.Text);
        }
    }
}

Open in new window


2.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{    
        for (int i = 0; i < e.Row.Cells.Count; i++)
        {
            e.Row.Cells[i].ToolTip = e.Row.Cells[i].Text;
        }    
}

Open in new window


3. You can define if html code itself:

<asp:TemplateField HeaderText="ID Number" ItemStyle-Width="90px" >
<HeaderTemplate>
       <asp:Label ID="Header" ToolTip="This is tooltip text !" runat="server" Text="Label"></asp:Label>
       </HeaderTemplate>
    <ItemTemplate>
      <asp:Label ID="Label1" runat="server" Text='<%# Bind("ID")%'></asp:Label>
    </ItemTemplate>
 </asp:TemplateField>

Open in new window

Ryan ChongSoftware Team Lead

Commented:
@Mrunal,

As per question's requirement, Murray's intention is to set the tooltip for header, not for the row items.
Hi Ryan
If you again visit my code, I have added condition that tooltip code will get executed only if row type is header.

@Murray, please confirm this solves your problem.
Murray BrownASP.net/VSTO Developer

Author

Commented:
Thanks very much

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial