Home/ Questions/Q 1059963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T18:15:09+00:00

My goal is to use CSS ONLY for some tooltips. I like the solution

  • 0

My goal is to use CSS ONLY for some tooltips. I like the solution here: http://sixrevisions.com/css/css-only-tooltips/

The problem I’m having is when hovering over the first “qwer” (the second TD of the first TR), you can see the second “qwer” (second TD of the SECOND TR) over the tooltip. I’ve been playing with the z-index properties of the span & the A element, but can’t get it to work.

Works fine in Firefox. IE7/8 is where I’m seeing the problem.

Any ideas?

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0