WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] Column tooltip (6 posts)

  1. travellers
    Member
    Posted 2 years 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 http://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?!

    http://wordpress.org/extend/plugins/wp-table-reloaded/

  2. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    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

  3. travellers
    Member
    Posted 2 years ago #

    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

  4. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    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

  5. travellers
    Member
    Posted 2 years ago #

    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

  6. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi,

    no problem, you are very welcome! :-)

    Best wishes,
    Tobias

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic