titleAttr for Column Headers

trongart

As described here, it is possible to set a tooltip for buttons with buttons.buttons.titleAttr. Is there something similar for column headers? I would like for an analogous title tooltip to popup when the user hovers over a column header.

colin

There isn't anything out of the box, but you can do something like this:

    initComplete: function() {
      this.api().columns().header().to$().each(function() {
        $(this).attr('title', 'title for ' + $(this).text())
      })
    }

Colin

trongart

@colin Thank you very much and understood! How would I access specific columns so they can have different titles based on the column index/target/name?

colin

You can see that in the code above. If you look at the example, you'll see the name of the column is included in the tooltip. If I'm misunderstanding, can you update or refer to my test case to demonstrate that, please.

Colin

trongart

@colin Apologies as I was not very clear- How would I set completely different tooltips to column headers individually to get tooltips like this:

Name column: "This is text A"
Position column: "Text B"
Office column: "Column 3"
etc.

kthorngren

Line 3 in Colin's code snippet is jQuery attr() which is used to set the title attribute of the header. Replace the 'title for ' + $(this).text() with the text you want to set. Instead of looping through all the headers you can individually reference them using a jQuery selector like $('th:eq(0)').attr('title', "This is text A"); for the name column.

Kevin

trongart

There is an issue with this approach when used with column class names, colvis, and colReorder as in this testcase.

1) When not all colums are visible on table load and you add them through the "Select Columns" buttons, the relevant title tooltips do not appear on the added column headers.
2) Using $('.data0').attr('title', "This is text 0"); displays a title not just for the header, but for all rows. How can I display the title tooltip only in the header?

kthorngren

1) When not all colums are visible on table load and you add them through the "Select Columns" buttons, the relevant title tooltips do not appear on the added column headers.

In that case you will want to use the technique Colin gave with columns().header(). If you don't want the loop you can just use column().header() with the column-selector specifying the classname. See this example:
http://live.datatables.net/wiganome/2/edit

2) Using $('.data0').attr('title', "This is text 0"); displays a title not just for the header, but for all rows. How can I display the title tooltip only in the header?

You would use a more specific jQuery selector, like $('th.data0').

Kevin

trongart

Thank you very much for your help @kthorngren and @colin !!

trongart

Is there a way to also set tooltips as with buttons.buttons.titleAttr for buttons inside the colVis collection? test case with ColVis

trongart

Moved the question above to a new thread as it's a separate question.