Member Avatar for arunselvaguru

Hi,

I want to set a tooltip for gridview header field with own CSS style.

Please let me know your comments on this.

  • 5 Contributors
  • 4 Replies
  • 113 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by vishalrane

Dani AI

Generated

As asked, the goal is a styled tooltip for GridView headers. Several replies suggested client-side plugins (quick and feature-rich), but if the requirement is just custom styling and small footprint, two lightweight approaches work well: inject attributes server‑side so the GridView renders the tooltip text, or use a HeaderTemplate with a data attribute and CSS for a fully styled tooltip.

Server-side (safe for sorting headers): add attributes in RowCreated (or after DataBind) and, when the header contains a LinkButton (sorting), set the tooltip on that control instead of the cell.

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType != DataControlRowType.Header) return;
    for (int i = 0; i < e.Row.Cells.Count; i++)
    {
        e.Row.Cells[i].Attributes["data-tooltip"] = "Column explanation " + i;
        LinkButton lb = e.Row.Cells[i].Controls.Count > 0 ? e.Row.Cells[i].Controls[0] as LinkButton : null;
        if (lb != null)
        {
            lb.Attributes["data-tooltip"] = "Column explanation " + i;
            lb.CssClass += " gv-header-tooltip";
        }
    }
}

Template + CSS approach (no JS library): put a span in the HeaderTemplate and use data-tooltip plus a pseudo-element to render the styled box.

<asp:TemplateField>
  <HeaderTemplate>
    <span class="gv-header-tooltip" data-tooltip="Long explanation">Column</span>
  </HeaderTemplate>
</asp:TemplateField>
.gv-header-tooltip { position: relative; cursor: help; }
.gv-header-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute; left: 0; top: 100%;
  background:#222;color:#fff;padding:4px 8px;border-radius:3px;
  white-space:nowrap; z-index:1000;
}

Notes: test headers that render links (sorting) and set attributes on the link. For accessibility and keyboard users, avoid relying only on title — use ARIA patterns and aria-describedby where appropriate. Useful references: title attribute docs, the WAI-ARIA tooltip pattern (WAI-ARIA APG), and the GridView HeaderRow property for server-side access (MSDN GridView.HeaderRow). This blends the lightweight approaches with the plugin suggestions from , , and depending on how complex the tooltip content needs to be.

Recommended Answers

All 4 Replies

Member Avatar for kvprajapati

You may use jQuery Tooltip plugins.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.