[Plugin: WP-Table Reloaded] Column tooltip

  • Resolved travellers

    (@travellers)


    13 years, 5 months ago

    My table has too many columns for me to properly describe it in the <th> field, and I decided I wanted to display a ‘tooltip’ text helper when the user hovers over a particular column.

    Sniffing in the source of my table inside a post, I discovered that each table cell helpfully already has a class defined:
    <td class="column-1">row1column1data</td>
    Just by adding the following to the css I was able to make my complete 5th column nice and red
    .column-5 {background-color: #FF0000!important;}
    So, now to add the tooltip css:

    .column-5 {
		background-color: #FF0000!important;
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}
}
.column-5:hover{z-index:25; background-color:#ff0}

.column-5 span{display: none}

.column:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center}

    (borrowed from https://psacake.com/web/jl.asp)
    Now all I need to do is add the <span> tooltip within the cell markup as in <td class="column-5">cellcontent<span>tip</span></td>
    …and this is where it all goes wrong – there is no markup like that, because all the classes are created on the fly!
    Ummm…. any suggestions?!

    https://www.ads-software.com/extend/plugins/wp-table-reloaded/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post.

    Well, yes, the classes are created on the fly, but the content is static: It simply is what you enter on the “Edit” screen of your table.
    So, instead of just the cell content, you just have to add your <span>tooltip text</span> code to the textarea of the header cell…

    Regards,
    Tobias

    Thread Starter travellers

    (@travellers)

    D’oh, of course! Okay, I’ve sorted it now, thanks. Still having a little trouble with the cell borders though that I can’t understand – you can see an example here down in the bottom right corner of the table where the borders have ‘broken’ up. I tried removing all my extra code to check, but unfortunately its still happening

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    this happens because you added an “Extra CSS class” to the table, namely “port”. This leads to the table getting a background image in the lower right corner (which is only visbile through the border though).
    If you remove the “Extra CSS class” “port” everything will look normal again.

    Best wishes,
    Tobias

    Thread Starter travellers

    (@travellers)

    That is unbelievably embarrassing. I simply forgot that I’d added that class, and having removed it the table is now perfect. Many many thanks

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ??

    Best wishes,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Plugin: WP-Table Reloaded] Column tooltip’ is closed to new replies.