I want to display large set of data on a table, so will need to shorten the column headers. However, I would like the users to hover over the column header and learn more about the content of the column. Is there a way to add tooltip in the table headers?
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
-
At this time, i can only suggest a custom workaround, and this works for cells,
I am honestly not sure if there is a way to do this for headers.
-
It is quite a custom solution, but, with some effort, it can be done,
and all of this requires some level of skill with HTML and CSS.
-
In this example, i made a string type column, and directly in the cell typed in some HTML,
a DIV with an ID, with some text inside;
then nested a SPAN element inside, with the "hover text" inside that, like this :
Then with some custom CSS, I created a hover text above the field;
now, depending on exactly where you want to position it, you can experiment with some styles;
I positioned it somewhere at the "middle top" above the cell, and you can choose whether to use px for pixels, or % for percentages of the screen for the values, such as width, positioning, margin, etc.
Thank you. Even a solution that requires manual updates to the table's CSS would work. It's a one time thing that I need to do, but will help improve the end user's experience significantly.
I understand where you're coming from, and i agree that a solution to set tooltips in headers would be beneficial for multiple users for sure,
but at this time we don't have any way to achieve that, neither with CSS or other workarounds.
-
But i am still just checking about this abbr element, our 2nd level Team will see if we can use that in any way, and i will report back on that for you, as soon as they confirm.
Sorry for the delay, i am just following up on this, our 2nd level Team has confirmed it.
Unfortunately, at this time, we don't have any working solutions for any tooltips,
other than my custom workaround to devise them for each cells - i don't have anything for the headers, though.
- Generally speaking, any kind of tooltips in general are only possible with a custom solution and we still have not found any solution for our plugin that works without issues.
Our developers will do their best to devise working solutions in the future, but at this moment we can't say an ETA if or when it would be possible.
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
-
If you need a solution for it now, maybe it can be done with a high level of custom work, but I am not sure, to be honest. Our developers are very busy at the moment, working on some priority tasks and fixing bugs and issues with our plugins, so they won't be having the time for custom work in the near future.
If you have coding skills, you can try to search resources such as Stack Overflow,
or try some 3rd Party Tooltips plugins, but we can't guarantee if it will work perfectly/without issues.
If you need to hire someone for help with custom work, we can recommend reaching out to someone who does custom solutions, such as WP Kraken, but we can't advise on their pricing.
Hi,
I want to display large set of data on a table, so will need to shorten the column headers. However, I would like the users to hover over the column header and learn more about the content of the column. Is there a way to add tooltip in the table headers?
Thanks!
Hi, Sabi
Sorry for the delay
We don't currently have a built-in feature to create any tooltips on hover,
our developers will work to add it in the future, but i can't say an ETA on it.
Please feel free to search on our suggestions page,
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
-
At this time, i can only suggest a custom workaround, and this works for cells,
I am honestly not sure if there is a way to do this for headers.
-
It is quite a custom solution, but, with some effort, it can be done,
and all of this requires some level of skill with HTML and CSS.
-
In this example, i made a string type column, and directly in the cell typed in some HTML,
a DIV with an ID, with some text inside;
then nested a SPAN element inside, with the "hover text" inside that, like this :
More about string type columns and their limitations and advantages here - https://wpdatatables.com/documentation/column-features/string-columns/
Then with some custom CSS, I created a hover text above the field;
now, depending on exactly where you want to position it, you can experiment with some styles;
I positioned it somewhere at the "middle top" above the cell, and you can choose whether to use px for pixels, or % for percentages of the screen for the values, such as width, positioning, margin, etc.
Try this out if you wish, and experiment with the styles, to find what could be the best for your project.
Here is a very useful resource with more information about creating tooltips with CSS - https://www.w3schools.com/css/css_tooltip.asp
-
And, you will have to do this method for each cell that you need a hover tooltip for.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thanks for the reply and hope you all had a good long weekend. Unfortunately, doing it in every cell is not something that I am after.
I have seen the use of abbr element for this.
Example:
<th class="sortable col-2" data-index="2">
<span>
<abbr title="Goals">G</abbr>
</span>
<span class="sort">
<i class="sort--icon"></i>
</span>
</th>
The code above displays G as the column header, but with a mouse over, it would display Goals.
Hi Sabi
Thank you for this example, to be honest, i was not aware of that.
The main question is, is it possible to implement anything like that with our plugin at the moment.
I will double-check if we have any kind of a workaround that might use this, and we will report back as quickly as possible.
Thank you for your patience.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thank you. Even a solution that requires manual updates to the table's CSS would work. It's a one time thing that I need to do, but will help improve the end user's experience significantly.
Hi Sabi
Sorry for the waiting time.
I understand where you're coming from, and i agree that a solution to set tooltips in headers would be beneficial for multiple users for sure,
but at this time we don't have any way to achieve that, neither with CSS or other workarounds.
-
But i am still just checking about this abbr element, our 2nd level Team will see if we can use that in any way, and i will report back on that for you, as soon as they confirm.
Thank you for your patience.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Hi Sabi
Sorry for the delay, i am just following up on this, our 2nd level Team has confirmed it.
Unfortunately, at this time, we don't have any working solutions for any tooltips,
other than my custom workaround to devise them for each cells - i don't have anything for the headers, though.
- Generally speaking, any kind of tooltips in general are only possible with a custom solution and we still have not found any solution for our plugin that works without issues.
Our developers will do their best to devise working solutions in the future, but at this moment we can't say an ETA if or when it would be possible.
Please feel free to search on our suggestions page,
to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.
You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;
and our newsletter, so you're informed about new features, bug fixes, freebies, etc.
-
If you need a solution for it now, maybe it can be done with a high level of custom work, but I am not sure, to be honest. Our developers are very busy at the moment, working on some priority tasks and fixing bugs and issues with our plugins, so they won't be having the time for custom work in the near future.
If you have coding skills, you can try to search resources such as Stack Overflow,
or try some 3rd Party Tooltips plugins, but we can't guarantee if it will work perfectly/without issues.
If you need to hire someone for help with custom work, we can recommend reaching out to someone who does custom solutions, such as WP Kraken, but we can't advise on their pricing.
Kind Regards,
Miloš Jovanović
[email protected]
Rate my support
Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables