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

Answer 2

var text = $(".slick-column-name").text(); will return all the text for ALL columns. So you're going to get text for all elements with that class.

So if you followed it up with: console.log(text) you'd see all the column headers output to your developer console. That's as expected!

It seems you have some disconnect in what jQuery can do here - the $ selector gets ALL the elements with that class name, and is not intuitive enough to know you want a 1:1 match between the text and column header.

What you are wanting to do instead is:

1. get all column headers (NOT TEXT)
2. loop through each column header, and set the column name tool tip to the column header text.

I'm not 100% familiar with slickgrid, but this should give you an idea:

// I'm using $ in the variable name to label this element as a jQuery extended variable
var $columnNames = $(".slick-column-name");
$columnNames.each(function(elem) {
    // this represents a single column header
    var $elem = $(elem);
    // gets the individual text for a header
    var text = $elem.text();
    // we grab the CLOSEST parent element that matches ".slick-column-name" and set the tooltip
    var $columnHeading = $elem.closest(".slick-column-name").tooltip({ title: text });
});

I didn't verify the code, but this should send you down the path you need to hit.

Now, I assume you mean ANGULAR SLICKGRID (misspellings happen!) - you should avoid mixing jQuery in with Angular. Mixing the two can create unexpected side-effects due to re-rendering (imagine the tooltips work one minute, then you make changes, and the tooltips are gone when something changes!)

Checking out the github repository for Angular SlickGrid: https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-headerbutton.component.ts

It looks like there is a tooltip option you can use to do this through Angular as well (their example demo looks to live here: https://ghiscoding.github.io/Angular-Slickgrid/#/headerbutton )