Display a HTML tooltip on the header column when i hover it

Tags: #<Tag:0x00007f8b1e28ed48>
#1

I want to display a tooltip which is a HTML table when I hover over an column header. How can I achieve this?

#2

Hey @krish

I recommend adding title tag to a column TH element. You can change the TH body in the afterGetColHeader hook.

#3

Hi,
Do you mean in the renderers add a title tag to the TD element.? the title attribute still displays a constant text. I need to display a table as a tooltip which has atleast 2 columns and multiple rows.

#4

I got what you said , its not the renderer. I override (afterGetColHeader)=“afterGetColHeader($event)” method and applied th.title.
But still title doesn’t accept the table.
I have a css which displays a table kind of tooltip, but when applied to th.title here,it is not displaying a table.

#5

I guess that I may have misunderstood the concept. Can you share a draft?

#6

Here is the thing, afterGetColHeader is overriden, when col header number is 5, when you hover onit, display a tooltip which is in the form of table
afterGetColHeader(event) {
if (event[0] === 5) {
event[1].title = /constructa a DIV which uses a css class tooltip to display a tooltip/
}
}

#7

afterGetColHeader has two parameters and the first one is an index not an event itself. It can be only undefined or a number so event[0] === 5 won’t ever work.
But this event === 5 will.

The second parameter is the TH element that represents the header.

That is why I would propose a structure like this.

 afterGetColHeader: function(index, TH) {
        if (index === 0 && TH) {
		  TH.children[0].title = 'abc'
        }
     }

https://jsfiddle.net/handsoncode/t1Lnjam6/

#8

It only works with index 0, how would you do if you want to show a different description for each index?

#9

I think you got me wrong, I want to display a HTML TABLE as a tooltip and NOT just simple text which is displayed using title attribute. use a css class tooltip to display HTML’s TABLE like show here

#10

@krish
we do not have a functionality like this built-in yet. You can create an additional element in the afterGetColHeader. This TH.children[0].children[0] is the actual title, so you could attach a sibling element there to hold the tooltip, but this could break the sorting and selection experience.
If you have this functionality on the must-have list I can schedule a development sessions for you, just please notice that this service is paid additionally (regardless of the support plan).

@mdiaz
the IF condition adds the title to the column with index 0 (first one) if the element is a TH. If you’d like to attach the same title to all the column headers you need to use this code

afterGetColHeader: function(index, TH) {
        if (TH) {
		  TH.children[0].title = 'abc'
        }
 }
#11

Thanks Aleksandra. I will check it out.

#12