Jquery – Display tooltip in JQ Grid

jqgridjquerytooltip

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;
        }},

Best Answer

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.

Related Topic