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

Hi,

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

text<br />
text

Regards,
Tobias

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

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

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!

Hi,

thanks, I really appreciate it!

Best wishes,
Tobias