Question

We create a html grid dynamically. This has more than 5000 rows and 10 columns (this can grow). We currently add a “title” attribute to each to show the tooltip on hover. Since we are adding attribute to all 5000×10 cells, it takes some time to add all those attributes and make the jQuery little heavy. I want to know is there any better and more efficient way of showing the tooltip on hover and reduce/lighten the jQuery? I am not sure if we can use delegates() or some other option?

function RenderGrid(colDefs,data){    
    .
    .
    var data='';
    for (var col in columnDefs) {
      data = d[colDefs[col].columnId] || '';
      rw[++i] = '<td title="' + data + '">';
      rw[++i] = data;
      rw[++i] = '</td>';
    }
    .
    .
}

Answer 1

$('.element-class').on('hover', function () {

//   create the tooltip element here;

});