How do I get tooltips for column heading in Angular-Slickgrid?

Question

The column heading has class ".slick-column-name"

I added this jquery -

var text = $(".slick-column-name").text();
$(".slick-column-name").tooltip({ title: text });

But it is showing every column name in each tooltip, ( for example ID , Description, Title are column headings, so the tooltip for each column heading is being shown as "ID Description Title"

Answer 1

Note that I'm the author of Angular-Slickgrid and as mentioned in a comment in previous answer, Angular-Slickgrid is a wrapper on top of SlickGrid which was created few years ago (when jQuery/jQueryUI were all the hype) and so ~jQuery is a deep dependency~ (jQuery is no longer required since 2023).

Now to focus on your question, if we search directly in the code for the css class that you have identified, we can see this line that has the following code

$("<div class='ui-state-default slick-group-header-column' />")
            .html("<span class='slick-column-name'>" + m.name + "</span>")
            .attr("id", "" + uid + m.id)
            .attr("title", m.toolTip || "")
            .data("column", m)
            .addClass(m.headerCssClass || "")
            .addClass(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn? 'frozen': '')
            .appendTo(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn? $groupHeadersR[index]: $groupHeadersL[index]);
}

oh look at that... there's already a toolTip attribute, so where does this come from? It's a option in the column definition (column - interface in Angular-Slickgrid)

So the short answer is... just use it by making your toolTip the same as your name and you should be good to go

this.columnDefinitions = [
  { id: 'firstName', field: 'firstName', name: 'First Name', toolTip: 'First Name Tooltip' }, 
  // ...
  }
];

That should do it... note that I didn't test it but I just inspected the code to find the answer. It's always good to look directly at the code, you find a lot of answers to these questions.

EDIT

I tried it and it does work as intended with the toolTip property