Display tooltip in JQ Grid

Question

I am using jqgrid to display data i need "Click Here to Edit " in all cells and "Click here to delete" for delete button cell

which is the best way to show this kind of tool tip in jqgrid?

Is it possible to add with

colNames: ['ROLEID', "Name", "", ""], 
colModel: [
    { name: 'ROLEID', index: 'ROLEID', width: 10, hidden: true, key: true }, 
    { name: 'ROLENAME', index: 'ROLENAME', width: 50, editable: true,
        search: false}, 
    { name: '', index: '', search: false, width: 30, align: "center",
        formatter: function (cellvalue, options, rowObject) {
            var btnDelete =
                '<div class="round-icon-btn close right delete_step" id=btnId_' +
                 options.rowId + ' ></div>';
            return btnDelete;
        }},

Answer 1

You can use cellattr property to set custom tooltip on in the column:

{ name: 'mydelete', search: false, width: 30, align: "center",
    cellattr: function () { return ' title="Click here to delete"'; },
    formatter: function (cellvalue, options, rowObject) {
        var btnDelete =
            '<div class="round-icon-btn close right delete_step" id=btnId_' +
             options.rowId + ' ></div>';
        return btnDelete;
    }}

Moreover I don't think that setting of id attribute on the custom button is really required. To handle click on the custom button you can use onCellSelect or beforeSelectRow callbacks. See the answer, this one, this old one.