CSS Only Tooltip Problem

Question

Have been using a simple CSS only tooltip.

Working Example css:

.tip
{
    position:relative;
}
.tip span.tooltip
{
    display:none;
    background:#ff5112;
    border:1px solid #9C0;
}
.tip:hover span.tooltip
{
    display:block;
    position:absolute;
    top:2em; left:2em; width:15em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center
}

html:

<span class="tip">
<table><tr>
<td>Working Tip</td><span class="tooltip">Tip</span>  
</tr></table>
</span>

Not working example: html:

<table><tr>
<span class="tip"><td>Not working TIP</td><span class="tooltip">Tip</span></span>
</tr></table>

And a Live example

Answer 1

Your problem is the table element - you cannot have a span that wraps <td>. Get rid of the table and everything will work.

Answer 2

I think that maybe I see your question but since the question is omitted, I'll take a shot. The second example is mal-formatted if you really wanted something to that extent it should be more like:

<span class="tip">
    <table>
        <tr>
            <td>Working Tip</td>
        </tr>
    </table>
    <span class="tooltip">Tip</span>  
</span>

If you are going to wrap the entire table the "tip" should be after the table tag.

Answer 3

<span class="tooltip"> needs to go inside of <td class="tip"> for your current CSS to work as expected...

<table><tr> 
  <td class="tip">
    Working Tip
    <span class="tooltip">Tip</span>
  </td>
</tr></table> 

Answer 4

I don't see your tooltip css class, try adding one

Answer 5

The solution that worked for me:

<table><tr><td>
<a href="blah.php" class="tip">
Blah Blah Text
<span class="tooltip">Blah Blah Tip</span>
</a>
</td></tr></table>

But this looks really bad with css turned off, so the way to go will be using the title attribute and then adding mootools or such libs on the top.

Thank you guys.

Answer 6

table within a span is not allowed, try fixing that