Looking for Hover/Tool Tip plugin to work with Tablepress

Hi,

thanks for your post, and sorry for the trouble.

You could look into using a Tooltip plugin or try this idea that I recently used:

1) Change the used Shortcode to

[table id=1 convert_line_breaks=false /]

(with the correct table ID), to prevent the conversion of line breaks, which might cause trouble in step 3) otherwise.

2) Add this to the “Custom CSS” on the “Plugin Options” screen:

.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;
}

Again, adjust the table ID as necessary.

3) Add this HTML-Code (filled with your content) into every cell that should get such a hover box:

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

Regards,
Tobias

Excellent.. Thank you very much Tobias.
Im getting closer to what I had in mind.
I just need to find out how to wordwrap the data in the box.

Hi,

for that, you’ll just have to insert the desired line breaks as HTML code:

text<br />
text

Regards,
Tobias

Hello Tobias
I was looking for the exact same thing. a tooltip when I hover over a cell in a table made with your awesome plugin.
I followed the steps that you mentioned, however it doesnt work, I cant see the tool tip popping when I hover over the cell.
what could be wrong?

Hi,

thanks for your post, and sorry for the trouble.

Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

thanks for the super fast response,
here is the page: https://goo.gl/RnROcl

I noticed that when I remove the display: none; I can see the box,

Hi,

thanks for the link! The reason why this is not working is that the code was originally designed to only work in table body cells, but not the header row. To enable that, just extend the line
.tablepress-id-1 td:hover .info-box {
to

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

in the CSS code from above.

Regards,
Tobias

works beautiful! thanks Tobias ??

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

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

sure did *****
thanks again

Hi,

thanks, I really appreciate it!

Best wishes,
Tobias

Hello Tobias,

thank you for the code. It works well.

One problem. When I add images as tooltip the red border doesn’t cover the image. The box doesn’t fit. How to fix this? You can see a screenshot of it here:

Best regards,
Ismar

Picture didn’t work, Here’s a link to it:
https://www.dropbox.com/s/2cf3hl76i60xlz2/Bildschirmfoto%202017-07-12%20um%2001.53.25.png?dl=0

And also: When I put more than one image in the tooltip the images appear one below another but I want them do be side by side. How to do that?