Show tooltip onHover SlickGrid's row

Question

Im newbie with jquery.

I've a task to put a tooltip on each row of a slickgrid. I know how to ajax it. But, reading the slickgrid documentation there's nothing in options like "hover" or "tooltip".

my call is like that:

var grid = new gridd.Grid("#ite", result,
                [{ id: "var1", field: "var1" },
                    { id: "var2", field: "var2" },
                    { id: "var3", field: "var3", width: 100, resizable: false },
                    { id: "var4",  field: "var4", width: 110, resizable: false}],
                { forceFitColumns: true },
                //I thought of something like
                { onHover: function.. },
                //
                { onClick: function (e, row, cell) {
                    var result = this.getData();

                    postSomething(result[row]);
                }
            });

Answer 1

One option that gets you the information is to subscribe to the grid's events onMouseEnter and onMouseLeave. The you can use whatever tooltip lib you want to have the text follow the mouse.

Use the event to discover which cell you are above. I use a dataview so need to use view.getItem in case any rows have been filtered out. If you are simply showing data without filtering, I believe data[cell.row] will work instead, but you'll need to test.

This will only get you the information to put in the tooltip, you'd need to use something like this to get it in a tooltip following the mouse. For my test, I just updated a label (with id=boringLabel) and the label updated correctly.

var grid = new Slick.Grid(selector, view, cols, opts);

....

grid.onMouseLeave.subscribe(function(e, args) {
    $("#boringLabel").text("NONE");
});

grid.onMouseEnter.subscribe(function(e, args) {
    var cell = args.grid.getCellFromEvent(e);
    var item = view.getItem(cell.row);
    $("#boringLabel").text(item.id + " " + item.description);
});