How to add tooltip for Commandfield ButtonType as image

Question

I have to add tooltip for my gridview edit image button. I coded as Commandfield.

<asp:CommandField ButtonType="Image"  
    HeaderStyle-HorizontalAlign="center"
    EditText="Edit" UpdateText="Edit" 
    ShowEditButton="True"  
    ItemStyle-VerticalAlign="Top"
    EditImageUrl="~/Images/edit.png"    
    UpdateImageUrl ="~/Images/Save.png" CancelImageUrl ="~/Images/cancel.png" 
    ItemStyle-Width="15px" ControlStyle-Width="15px">
</asp:CommandField>

Is it possible to add a tooltip in gridview commandfield button type as image?

Answer 1

The RegisterStartupScript part of @show's answer does not neeed to run during RowDataBound. There it will run for each row doing exactly the same thing during the grid databind process. You can drop those two lines into the OnPreRender event for the page and it will have the same effect but only happens once during code execution on the server.

Answer 2

I didn't try solutions suggested by Sekaran and Show and took a little different approach as I was not willing to rely on JavaScript; thought it might be worth sharing.

A Show's mentioned in his solution that EditText property of Edit button will be rendered as alt attribute of image; this means it should also be stored as AlternateText of the .NET counterpart. In my case; I have Edit, Update, Delete and Cancel buttons in my CommandField and I wanted to do same for all buttons.

So the (localized) text is in AlternateText property of buttons; I am looping through each buttons and put this value in ToolTip property. Here is my code.

protected void myGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        foreach (Control ctrl in e.Row.Cells[2].Controls)
        {
            if (ctrl.GetType().BaseType == typeof(ImageButton))
                ((ImageButton)ctrl).ToolTip = ((ImageButton)ctrl).AlternateText;
        }
    }
}

I had hardcoded Cell Id "2" in my code as it was well known. Every Image Button control is of System.Web.UI.WebControls.DataControlImageButton type which is not accessible. Therefore I had used it's BaseType which should be ImageButton

Answer 3

or you can

1. define the EditText property of your gridview's commandfield (as you did), which will render as alt atribute of the <input type='image' alt='Edit' /> tag: <asp:CommandField ButtonType="Image" EditText="Edit" etc />

2. then add a script tag to set the title attribute with the following code:

VB:

Protected Sub gvResourceEditor_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvResourceEditor.RowDataBound
    Dim strScript as String = "$('#" + gvResourceEditor.ClientID + " input[type=image]').each(function(key, el) {el.title=el.alt;});"
    Page.ClientScript.RegisterStartupScript(Me.GetType, "SetEditButtonTitle", strScript, True)
End Sub

CS:

protected void gvResourceEditor_RowDataBound(object sender, GridViewRowEventArgs e) {
    string strScript = "$('#" + gvResourceEditor.ClientID + " input[type=image]').each(function(key, el) {el.title=el.alt;});"
    Page.ClientScript.RegisterStartupScript(this.GetType(), "SetEditButtonTitle", strScript, true);
}

Of course, you may need to taylor the javascript to your grid. This script will set the title attribute of all input tag with type=image.

Answer 4

Following code works well:

protected void gvResourceEditor_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            try
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    e.Row.Cells[4].ToolTip = "Edit Resource Details";
                    if (e.Row.RowState == DataControlRowState.Edit || e.Row.RowState.ToString() == "Alternate, Edit")
                    {
                        int i = 0;
                        foreach (TableCell cell in e.Row.Cells)
                        {
                            if (e.Row.Cells.GetCellIndex(cell) == 4)
                            {
                                ((System.Web.UI.WebControls.ImageButton)(e.Row.Cells[4].Controls[0])).ToolTip = "Update Resource Details";
                                ((System.Web.UI.LiteralControl)(e.Row.Cells[4].Controls[1])).Text = " ";
                                ((System.Web.UI.WebControls.ImageButton)(e.Row.Cells[4].Controls[2])).ToolTip = "Close Resource Details";
                            }
                            i++;
                        }
                    }
                }
            }
            catch (Exception _e)
            {
            }
        }