Tooltips/title for buttons in ColVis

trongart

Is there a way to set tooltips (title attribute) as with buttons.buttons.titleAttr for buttons inside the ColVis collection? test case with ColVis

allan

No - sorry. Those buttons are generated automatically, so there is no way to do that. The only workaround would be to define the column visibility buttons using the toggle button, one for each column, yourself.

Allan

trongart

Thank you @allan - The colVis collection has the class buttons-columnVisibility and every button has its own number under data-cv-idx. I wonder if adding a title attribute through JS for every button in dt-button buttons-columnVisibility and data-cv-idx = X may work, but no success so far. Tried the following in this test case to get a title for the first colVis button.

kthorngren

You are getting this error:

Uncaught Error: Syntax error, unrecognized expression: .dt-button buttons-columnVisibility data-cv-idx="1"

Your jQuery selector is invalid. Additionally the colVis buttons aren't in the DOM when you are trying to set the tittle attribute. Use the buttons-action to set the attribute after the button is clicked. Use a jQuery selector like this $('.buttons-columnVisibility:eq(0)') to select the first button. Updated example:
http://live.datatables.net/reqoyawa/2/edit

Kevin

trongart

Thank you!!

trongart

@kthorngren There seems to be a problem with this approach when I use colReorder.

I updated the test case by adding title attributes to all buttons within colVis collection and using object-based ajax data.

Initially all titles are correct in colVis collection, but when you move any of the columns to a different index, the buttons also move within colVis collection and the titles/tooltips become mismatched.

Is there a way to prevent the button positions from being updated in colVis collection or to use a specific column names/index for the titles/tooltips instead of
$('.buttons-columnVisibility:eq(0)')?

trongart

Tried table.colReorder.transpose() in this test case, but no luck:

What would be the correct syntax to get the permanent column index into the jquery selector $('.buttons-columnVisibility:eq(0)') here?

kthorngren

The column number you want to pass into colReorder.transpose() is the actual index of the column. For example for the position column you used table.colReorder.transpose(0) but it should be table.colReorder.transpose(1).

Unfortunately you can't just use table.colReorder.transpose(1) because you are skipping the first column. So you will need to subtract 1. Like this example:
http://live.datatables.net/zizarire/1/edit

However there seems to be a couple other issues with this solution. If you reorder the columns while the Select Columns is open they will reorder in the button list but the titles aren't updated. You could use column-reorder to catch this and update the titles.

The other issue I noticed is if I drag the Names column to the right it shows in the buttons but its not one of the columns you are setting the title for.

I think I would change the approach. Each of the buttons has a span which looks to be the column header title. I think I would look at getting all the span elements in the buttons-columnVisibility class then use that to determine the title. You could do something simple like have an object with the column header titles as the key and the tooltip you want to display as the value. Not sure how you want to map the columns to the tooltip.

Also use a function for this so you can call it when the button is clicked or when the column-reorder fires.

Kevin

trongart

@kthorngren Thank you so much for looking into this and for the proposed solution.

You are right- using table.colReorder.transpose() produces the 2 issues you outlined.

I tried to apply the span approach here
with $('.buttons-columnVisibility span').text(), but not sure how to split this data and to link it to the correct tooltips and buttons inside colVis collection.

kthorngren

I had some time so knocked out this example:
http://live.datatables.net/tinaloga/2/edit

All you need to do is change the getTitle() function to use wha you want for mapping the header titles to the tooltips. You can use the object like I created or make something more dynamic.

Kevin

trongart

@kthorngren Thank you so much for this! Amazing!!

mike witherspoon

Here's my "hack" for getting proper title attributes in the HTML <TH> tags.

I "hacked" the data object for the column definition by adding the key:value pair, titleAttr : 'put your title string here'. I used the key name to keep consistent nomenclature and purpose with the custom buttons.

Like so...

{ data: 'gCount', name: 'gCount', title: 'Count', titleAttr: 'Number of users in group' },

Then in the dataTables configuration I added the "init.dt: event with some jquery doing a for-each on the table thead th selection, used the settings object to read the new titleAttr field from the aoColumns object like so...

.on('init.dt', function (e, settings, json) {
    $('table.dataTable thead th').each(function (index) {
        $(this).attr('title', settings.aoColumns[index].titleAttr)
    });
});

This adds the attribute into the tag as intended

<th ... title='your title string here'>...</th>

TBH its not an actual hack. I simply extended this basic data structure for my needs.
This is why I love datatables so much!

Super simple and so far there appears to be no impact to the inner workings of datatables.

colin

Thanks for posting, Mike, and sorry about the multiple posts - the spam filter took a dislike to your messages!

Colin