Tooltips/title for buttons in ColVis
Tooltips/title for buttons in ColVis
Is there a way to set tooltips (title attribute) as with buttons.buttons.titleAttr for buttons inside the ColVis collection? test case with ColVis
This question has accepted answers - jump to:
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.
Thank you @allan - The colVis collection has the class
buttons-columnVisibilityand 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.
You are getting this error:
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-actionto 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:
@kthorngren There seems to be a problem with this approach when I use
I updated the test case by adding title attributes to all buttons within
colViscollection and using object-based ajax data.
Initially all titles are correct in
colViscollection, but when you move any of the columns to a different index, the buttons also move within
colViscollection and the titles/tooltips become mismatched.
Is there a way to prevent the button positions from being updated in
colViscollection or to use a specific column names/index for the titles/tooltips instead of
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
The column number you want to pass into
colReorder.transpose()is the actual index of the column. For example for the
positioncolumn you used
table.colReorder.transpose(0)but it should be
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:
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-reorderto 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
spanwhich looks to be the column header title. I think I would look at getting all the
spanelements in the
buttons-columnVisibilityclass 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
@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
$('.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.
I had some time so knocked out this example:
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.
@kthorngren Thank you so much for this! Amazing!!
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.
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
titleAttrfield from the
aoColumnsobject like so...
This adds the attribute into the tag as intended
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.
Thanks for posting, Mike, and sorry about the multiple posts - the spam filter took a dislike to your messages!