ansaurus

Question

Answer 1

A:

SOLVED

Found the solution here: http://www.webmasterworld.com/forum83/8069.htm

The key was only applying the "position: relative;" on a.tooltip:hover, not just a.tooltip . Working code:

<html>
<head>
    <style type="text/css">
        /*  css only tooltips via http://sixrevisions.com/css/css-only-tooltips/  */
        a.tooltip:hover { position: relative; left: 0px; top: 0px; z-index: 0; color: red; }
        a.tooltip span { 
            margin-left: -2000px;
            position: absolute;
            left: 5px;
            top: 10px;
            width: 200px;
            padding: 4px;
            background-color: #E2E7FF;
            border: 1px solid #003099;
            text-decoration: none;
            color: #000;
        }
        a.tooltip:hover span { margin-left: 0px; z-index: 999; }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>asdf</td>
            <td><a href="#" class="tooltip">qwer<span>asdf asdf asfd asdf asfd asdf asdf asfd asdf</span></a></td>
            <td>zxcv</td>
        </tr>
        <tr>
            <td>asdf</td>
            <td><a href="#" class="tooltip">qwer<span>qwer qwer qwer qwer qwer qwer qwer qwer qwer</span></a></td>
            <td>zxcv</td>
        </tr>
    </table>
</body>
</html>

loneboat 2010-09-07 19:26:22

Answer 2

A:

If you'd included this part of the original style further down in your stylesheet, it would also have worked:

    * html a:hover { background: transparent; }

Traingamer 2010-09-07 19:37:01

You left this part of the sixrevisions code out of the styles - worked for me...

Traingamer 2010-09-14 16:27:13

ansaurus

tags:

views:

answers:

CSS-only tooltips - problem w/z-index?

SOLVED

related questions