CODEWITHSUNDEEP
htmlcssinternet-explorerhover
ErikE
ErikE

Reputation: 50251

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 I'm trying to accomplish:

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.

Upvotes: 1

Views: 3852

Answers (2)

ErikE
ErikE

Reputation: 50251

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.

Upvotes: 0

Baloneysammitch
Baloneysammitch

Reputation: 701

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.

Upvotes: 2

Related Questions