Display Tooltip in ASP.Net GridView Header cell using CSS

Hi alhamd,

Refer below code, This will surely solve your problem.

HTML

<style>
    #tooltip{
        position:relative;
        cursor:pointer;
        border-bottom:2px;
        padding:7px;         
        font-weight:bold;
    }

    #tooltipText{
        position:absolute;
        right:-115%;
        top: 0;
        transform: translateX(-50%);
        background-color: #000;
        color:#fff;
        white-space:nowrap;
        padding:5px 10px;
        border-radius:7px;
    }

    #tooltipText::before{
        content:"";
        position: absolute;
        left:-7%;
        top:19%;
        transform: translateX(-50%);
        border:9px solid;
        border-color: #0000 #000 #0000 #0000;
    }
</style>

<asp:GridView ID="gvVacc" runat="server" AutoGenerateColumns="false" AllowPaging="false"
    RowStyle-Wrap="false" HeaderStyle-Wrap="false" ShowFooter="false" EmptyDataText="No Event Found."
    Class="table table-striped table-bordered table-hover">
    <Columns>
        <asp:BoundField DataField="Vac_Date" HeaderText="Vaccination Date" />
        <asp:TemplateField>
            <HeaderTemplate >
                <div id="tooltip">
                    <span id="tooltipText">Important Date</span>
                    <span>Date</span>
                </div>
            </HeaderTemplate>
            <ItemTemplate>
                <asp:Label runat="server" Text='<%#Eval("Date") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Namespaces

using System.Data;

Code

protected void Page_Load(object sender, EventArgs e)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Vac_Date"), new DataColumn("Date") });
    dt.Rows.Add("Date1", DateTime.Now.ToString());
    gvVacc.DataSource = dt;
    gvVacc.DataBind();
}

Screenshot