На довольно простой веб-странице при наведении курсора на некоторые ссылки появляется текст, напоминающий всплывающую подсказку.
Для начала вот тестовая страница, с которой я работаю:
<!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>
Проблема, с которой я сталкиваюсь, заключается в том, что текст из других значений отображается в тексте всплывающей подсказки.
Наведите курсор на первую строку, второй столбец, чтобы увидеть эффект.
Есть несколько вещей, которые япытаюсь выполнить:
Расширить область активации для наведения мыши, чтобы при наведении курсора на некоторое пространство справа от "Status 6" была вызвана всплывающая подсказка (скажем, 100-150 пикселейобщая ширина цели).Сначала, когда я добавлял display:block к a.tooltip, IE зависал при наведении курсора.Я решил это, удалив width:14em из a.tooltip:hover.Стилизация ширины события наведения + display.block на элементе a делает ПЛОХО.
Изменение ширины всплывающей подсказки без изменения ширины столбца / родительского элемента a элемент (поэтому подсказка может быть шире и занимать меньше места по вертикали).Опции для создания всплывающих подсказок изменяют ширину с ее содержимым до максимальной ширины, и в этот момент перенос строк будет потрясающим, но, вероятно, невозможным в IE.Как только я поместил ширину на a.tooltip, часть всплывающей подсказки, которая находится выше других строк, чем источник при наведении, пропускает текст из этих ячеек.Удалите ширину, и вы увидите, что текст больше не просвечивает.
Эффект наведения мыши применяется ко всей подсказке, поэтому если при перемещении подсказка покрывает 3 строкимыши вниз, следующие 2 строки не активируются, потому что курсор не покинул подсказку.Может ли эффект наведения применяться только к исходному элементу, наведенному на указатель мыши, а не к самой всплывающей подсказке, поэтому перемещение мыши вниз покажет каждую всплывающую подсказку в каждой строке?
Было бы неплохо, если бы ссылки моглиникогда не активировать (они не могут сфокусироваться).Я не знаю, возможно ли это.Жаль, что IE не поддерживает hover ни на каких элементах, кроме ссылок.
Примечание: скоро IE6 будет заброшен в пользу IE7.Если это имеет большое значение, то IE7 может быть целевым браузером.
Спасибо за вашу помощь.