Tooltip column titles with sheet automatically imported from Google Sheets

P.S. I have also already added this to the Custom CSS box…

.tablepress-id-1 td {
	position: relative;
}

.tablepress-id-1 .info-box {
	display: none;
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	border: 2px solid #ff0000;
	width: 200px;
	height: 100px;
	padding: 5px;
	background-color: #ffffff;
}

.tablepress-id-1 td:hover .info-box {
	display: block;
}

And I am terribly sorry to have to ask but I am pulling my hair out trying to figure this out. Since I selected the option to make the table scrollable horizontally it introduces the light green tint from the Header row into another row below.

I’ve tried to get rid of it by targeting thead but this removes the main header row too. And I’ve tried removing row-1 but that doesn’t work either. I’m not sure what is causing this row to appear. Do you have any idea?

Hi,

I don’t see the

<div class="info-box">
Your content and data.
</div>

in your table cells? Where exactly did you add this?

As for the double first row: That’s caused by some CSS in your theme. To fix that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.dataTables_wrapper .tablepress thead th {
    padding: 10px !important;
}
.dataTables_wrapper .dataTables_scrollBody .tablepress thead th {
    padding: 0 !important;
}

Regards,
Tobias

Regards,
Tobias

Hi Tobias,

Thank you once again for such great support. I really appreciate it. I am going to make a donation to thank you for the support now.

The CSS you provided has helped me fix that issue with the header, I can’t believe I missed that.

—

Apologies for not providing enough information on the tooltip issue.

My spreadsheet is imported from here – https://docs.google.com/spreadsheets/d/1o4nQ5XKNkjENOdi8Rvd3qmFPxWSGpMyMUkSGK8mGPVs/edit?usp=sharing

The code…

<div class="info-box">
Your content and data.
</div>

…is added to the top two cells ‘Company’ and ‘Index’.

As this table is set to automatically update I thought adding the code directly to the Google Sheet would be the best place for it. Is that correct?

You can see that nothing is appearing in the table heading next to ‘Company’ but when you click ‘Show/hide columns’ the title for that column is ‘Company Your content and data’ so it is pulling in the text somehow.

What do you recommend to add the tooltip in the table cell but now have any tooltip text appear in the ‘Show/hide columns’ column title?

—

Many Thanks,
Jimmy

Hi,

ah, to make the tooltip show, please change the line

.tablepress-id-1 td:hover .info-box {

to

.tablepress-id-1 th:hover .info-box {

However, you will then see the next problem, caused by the horizontal scrolling. Due to how that works technically (two tables are shown above each other), the tooltip is cut off.
We could maybe get around that by using a different type of horizontal scrolling (the scroll mode from https://tablepress.org/extensions/responsive-tables/ which works without JavaScript), but it will create other issues (the dropdown and search field will also be scrolling).
Also, I don’t have a solution for not showing the tooltip text as part of the Show/Hide columns buttons ??
You might have to switch to “old-fashioned” browser tooltips, by writing this as the cell header:

<span title="This is the tooltip text.">Company</span>

Regards,
Tobias

Hi Tobias,

Thank you once again for the amazing support!

I’ve had to set the page to private now (here’s a screenshot https://www.dropbox.com/s/r39eehy68gsmfqc/Screenshot%202021-05-13%20at%2016.57.49.png?dl=0) and send it to my client for review but I was able to use a Tooltip plugin called ‘Responsive Mobile-Friendly Tooltip’ that works with shortcodes. So I was able to add the shortcodes to my Google Sheet heading cells.

The tooltip generated by this plugin appear above rather than below the cursor so I can retain the horizontal scroll where the search box and buttons stay fixed in position. So this is amazing!

And I brought in some AwesomeFont icons that are placed after the word ‘Company’ to be the basis for the tooltip. These icons show in my heading cells but don’t appear in the colvis list as text. Win win!!

I think everything is exactly as I wanted it to be now. Thanks again. I’ll be making a donation for the support shortly.

Have a great day!
Jimmy

Hi,

awesome! That sounds really great! Good to hear that you found a solution!
And thanks for wanting to donate, I really appreciate it!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!