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">■</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">■</span> Name 1</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
</tr>
<tr>
<td><span class="s6">■</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">■</span> Name 4</td>
<td class="status"><a class="tooltip" href="" onclick="return false;">Status 6</a></td>
</tr>
<tr>
<td><span class="s5">■</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">■</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.
