CSS IE Hover Effect - Overlapping Elements, Display:Block, and Crashes

Posted by Emtucifor on Stack Overflow See other posts from Stack Overflow or by Emtucifor
Published on 2010-03-05T02:41:35Z Indexed on 2010/04/05 22:03 UTC
Read the original article Hit count: 920

Filed under:

internet-explorer

|

hover

|

css

|

html

In a fairly simple page, I have some text appear on hover over some links, like a tooltip.

To start with here's my 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 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 element (so the tooltip can be wider than itso it takes up 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 IE8. If it makes a big difference, then IE8 can be the target browser instead.

Thanks for your help.

Developer IT