Get Free Trial
Get Free Trial

tooltips on header of the KPIs

Angelo asked on June 12, 2019

Hi all,
How to implement / customise tooltips for header to the columns? See the attach file.
Many thanks
Angelo

Attachments:
tooltip.png

4 answers

Public
Vera Didenko Flexmonster June 13, 2019

Hello, Angelo,
 
Thank you for your question.
 
This can be achieved via the customizeCell() API call.
 
With the customizeCell() API call you can get access to the wanted header cells and add your tooltip class to them.
 
Please see the following thread: https://www.flexmonster.com/question/how-to-have-a-header-multiline/, a working solution can be found here.
 
Let us know if this works for you.
 
Best Regards,
Vera 

Public
Angelo June 14, 2019

Hello Vera,
thank you for your quick answer, you are always ready to help users 🙂
I’d like to use a custom tooltip, not the same text of the column name, how can I implement it?
many thanks & best regards
Angelo
 

Public
Vera Didenko Flexmonster June 14, 2019

Hello, Angelo,
 
Thank you for your response.
 
In order to set a custom tooltip for the headers, you can specify the desired tip the following way: 

customizeCell: function(cell, data) {
if (data && data.rowIndex == 1) {
// Specify the tooltip text
cell.attr["title"] = "PS: This is a category type";
}
}

Here is a JSFiddle example for illustration.
 
 
If you would like to set a separate custom tooltip for each header, you can specify the desired tooltip text in an array and then assign them like this:

customizeCell: function(cell, data) {
if (data && data.rowIndex == 1) {
//The data.columnIndex for the headers starts the count from 1, hence 1 is subtracted
cell.attr["title"] = tooltips[data.columnIndex-1];
}
}

Here is a JSFiddle example for illustration.
 
 
Please let us know if this approach works fine for you.
 
We are looking forward to hearing from you.
 
Best Regards,
Vera

Public
Angelo June 16, 2019

Hello Vera,
this is a very nice example and solved my issue 🙂
Many thanks
Best Regards
Angelo

Please login or Register to Submit Answer