Is there an option (standard or Premium versions) that allows a tooltip link to be added to table text?
Specifically, we have a table of Membership Benefits, listing benefits and what levels at which they are available. Some of the benefits have long descriptions to ensure clarity. However, we'd like to use shorter descriptions and add a tooltip link to the description so that when hovered (desktop) or clicked (mobile, desktop) a full description appears in a tooltip.
Is this available with your standard or premium version of wpDataTables? If not are there any other plugins or solutions that can achieve this in our WordPress site?
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.
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 column in a table,
and, directly in the table cell, i type in this HTML.
The hover text will be placed inside a "SPAN" HTML element, we give it ID as "tooltiphover";
and the main Text of the cell, we will add next to it, it is this "mainText" inside a HTML DIV with ID of "tooltipwrapper"
On this screenshot, as you see - i have taken that HMTL code, and added this directly in a cell of a String Column of the table.
-
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.
Place the following CSS in the Table Customize section/Custom CSS:
And, you will have to do this method for each cell that you need a hover tooltip for.
I hope that this helps.
And i just wanted to point out that you can try wpDataTables before purchasing
on our sandbox Demo sites ( you can find links for the main plugin Demo,
as well as add-on Demos, in my signature),
and there is a 15-day money-back guarantee period,
so if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all plugins and add-ons)
This looks great, however I need the tooltips in the column headers of a table created using MySQL. I tried to use the code you put in the cell in the header, but it does not work. Can you advice on how that could be made possible?
Hi Miloš, I'd be really happy if there was a built-in tooltip option as well. I created a solution based on your notes below, but it's a little clunkier than I would like. Thanks for your consideration, John
We pointed this out to our Developers and to management, they are aware we have several users who need this option, and will do their best to add it in the future, i just can't promise an ETA on it, but 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.
Is there an option (standard or Premium versions) that allows a tooltip link to be added to table text?
Specifically, we have a table of Membership Benefits, listing benefits and what levels at which they are available. Some of the benefits have long descriptions to ensure clarity. However, we'd like to use shorter descriptions and add a tooltip link to the description so that when hovered (desktop) or clicked (mobile, desktop) a full description appears in a tooltip.
Is this available with your standard or premium version of wpDataTables? If not are there any other plugins or solutions that can achieve this in our WordPress site?
Thanks, John
Hi John,
We don't currently have a built-in feature to create tooltips on hover ( or on click).
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.
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 column in a table,
and, directly in the table cell, i type in this HTML.
The hover text will be placed inside a "SPAN" HTML element, we give it ID as "tooltiphover";
and the main Text of the cell, we will add next to it, it is this "mainText" inside a HTML DIV with ID of "tooltipwrapper"
-
On this screenshot, as you see - i have taken that HMTL code, and added this directly in a cell of a String Column of the table.
-
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.
Place the following CSS in the Table Customize section/Custom CSS:
And, this will be the result in the table :
If i hold my mouse over one of the cells that say "mainText", this "hover text" element with white text and black background will appear above.
-
I got this idea because I read from this resource about how to make hover text with HTML and CSS.
If you wish to learn in more detail how to create CSS tooltips, it is explained here in full detail:
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.
I hope that this helps.
And i just wanted to point out that you can try wpDataTables before purchasing
on our sandbox Demo sites ( you can find links for the main plugin Demo,
as well as add-on Demos, in my signature),
and there is a 15-day money-back guarantee period,
so if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all plugins and add-ons)
Let me know if you have any additional questions.
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 Miloš,
This looks great, however I need the tooltips in the column headers of a table created using MySQL. I tried to use the code you put in the cell in the header, but it does not work. Can you advice on how that could be made possible?
Kind regards,
Auke
Hi Auke,
Sorry to disappoint you, but it is not possible to achieve tooltips for the Headers.
At the moment, the workaround i sent only works inside the table cells, and only in String Type columns,
but not for Headers.
We might work on it in the future, but i can't say if or when it might be possible.
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 your response. Hope this gets added soon.
Hi Auke,
No problem, i am happy to advise.
We will do our best to add it as soon as possible, but can't promise a realistic ETA.
Thank you.
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 Miloš, I'd be really happy if there was a built-in tooltip option as well. I created a solution based on your notes below, but it's a little clunkier than I would like. Thanks for your consideration, John
Hi John,
I can completely understand.
We pointed this out to our Developers and to management, they are aware we have several users who need this option, and will do their best to add it in the future, i just can't promise an ETA on it, but 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.
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
Not a problem, I understand. I will keep an eye on the change log to see if tooltips have been added.
Thanks for your help and keep up the good work on a very useful and well-made plugin!!
Best regards, John
Hi John,
Thank you for the kind words, we appreciate it.
Anything else that we could assist with, please don't hesitate to create new tickets.
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