CSS IE Hover Effect - Overlapping Elements, Display:Block, and Crashes_问答_开发者

In a fairly simple web page, some tooltip-like text appears when hovering over some links.

To start with here's the test page I'm working with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tooltip Test Page</title>
<style type="text/css">
html, body, form, table, tr, td, div, p, h1, h2, h3, h4, h5 {
 border:0;
 margin:0;
 padding:0;
}

body {
 margin:10px;
}

html, body, table {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
}

h1 {
 font-weight:bold;
 font-size:16px;
}

table {border-collapse:collapse;}
td {padding:0 8px 0 0;}

a.tooltip {
 z-index:24;
 text-decoration:none;
 cursor:default;
 position:relative;
 color:#000;
 display:block;
 width:100px;
}
a.tooltip span {display:none;}
a.tooltip:hover, a.tooltip:active {
 z-index:25;
 color:;
 background:;
/*
 the color and background actually don't matter for their values,
 it's just that these have to change for IE to apply this style properly.
 Leaving out the color or the background makes this fail in different ways.
*/ 
}

a.tooltip:hover span, a.tooltip:active span {
 display:block;
 position:absolute;
 color:black;
 background-color:#FFFFCC;
 border:1px solid black;
 padding:1px;
 text-align:left;
 top:0;
 left:0;
 margin-top:-1px;
}

td span.s5 {color:#ff0000}
td span.s6 {color:#0000ff}

</style>
<script type="text/javascript">
function labelSubmit(label) {
  document.getElementById('o').value=label;
  document.BackAt.submit();
}
</script>
</head>
<body>
<h1>tooltip Test Page</h1>
<table>
  <tbody>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 3</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some very long tooltip text to demonstrate the  problem by overlapping the cells below.</span></a></td>
    </tr>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 1</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
    </tr>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 2</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Some tooltip text</span></a></td>
    </tr>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 4</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
    </tr>
    <tr>
      <td><span class="s5">&#x25a0;</span> Name 5</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 5<span>More Notes</span></a></td>
    </tr>
    <tr>
      <td><span class="s6">&#x25a0;</span> Name 6</td>
      <td class="status"><a class="tooltip" href="" onclick="return false;">Status 6<span>Yet more notes</span></a></td>
    </tr>
  </tbody>
</table>
</body>
</html>

The problem I'm experiencing is that text from other values shows through the tooltip text.

Hover over the first row, second column to see the effect.

There are a couple of things 开发者_StackOverflow社区I'm trying to accomplish:

Make the activation area for the hover wider, so hovering over some space to the right of "Status 6" calls up the tooltip (say, 100-150px total width of target). At first, when I was adding display:block to a.tooltip, IE was terminating on hover. I resolved that by removing width:14em from a.tooltip:hover. Styling the width of the hover event + display.block on the a element does BAD things.
Change the width of the tooltip without changing the width of the column/parent a element (so the tooltip can be wider and take less vertical space). Options for making the tooltips change width with its contents up to a max width, at which point the lines wrap would be awesome, but probably impossible in IE. As soon as I put a width in place on a.tooltip, the portion of the tooltip that is above other rows than the hover source let text show through from those cells. Remove the width and you'll see that the text doesn't show through any more.
The hover effect applies to the entire tooltip, so if the tooltip covers 3 rows, while moving the mouse downward, the next 2 rows won't activate because the cursor hasn't left the tooltip. Can the hover effect apply only to the initial element hovered over and not the tooltip itself so moving the mouse downward will show each tooltip in each row?
It would be nice if the links could never be activated (they can't take the focus). I don't know if that's possible. Too bad IE doesn't support hover on any elements but links.

Note: soon IE6 will be abandoned in favor of IE7. If it makes a big difference, then IE7 can be the target browser instead.

Thanks for your help.

You are not going to be able to solve these issues with css alone. As you already know, IE doesn't support the :hover pseudo-selector, so you will need to render your links inactive by adding href="javascript:void(0);" to your links.

I highly recommend http://craigsworks.com/projects/qtip/ as a jquery solution. You can specifically set hover conditions and the funcitonality degrades with js off and it even works with IE6. Also, you can apply these tooltips to any tag, solving your anchor issues.

Even with this plugin, you still have a problem with tooltips overlapping list content, so you should position them to the side of the list. That way you can hover your mouse straight down the list with no interference from the tooltip.

The answer to the crashing is that IE simply crashes in many edge cases on hover, especially if certain key elements don't acquire HasLayout.

Baloneysammitch's idea of putting the popups to the right is also good.