Использую готовый скрипт для подсказок. В таблице без проблем работает вот в таком виде:
Но мне нужно это все на дивах сверстать. Пробую так:
Но при нажатии на кнопку, span'a справки не видно, т.к. он внутри div'a. z-index прописан в CSS. Помогите поправить верстку!
Как реализована справка (где то скачал):
<style type="text/css">
.helptip {
float:right;
padding: 1px 7px;
margin: 0px;
background: #eee;
border: 1px solid #ddd;
cursor: pointer;
border-radius: 5px;
position: relative; /* Важно!
Размещать абсолютное позиционирование внутри
относительно данного тега */
width: auto;
}
.helptip:hover {
background: #fff;
}
.helptip div{
padding: 8px;
margin: 5px;
background: #FBFBF9;
border-radius: 5px;
border: 1px solid #CBCBBD;
position: absolute; /* Важно!
Абсолютное позиционирование */
display: none; /* Важно! Скрыть */
left: -150px;
bottom: 15px;
z-index: 99; /* Важно!
Всплывающие подсказки всегда выше
нижеследующих элементов */
min-width: 300px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
cursor: default;
}
.helptip span {
padding: 8px;
margin: 5px;
background: #FBFBF9;
border-radius: 5px;
border: 1px solid #CBCBBD;
position: absolute; /* Важно!
Абсолютное позиционирование */
display: none; /* Важно! Скрыть */
left: -400px;
bottom: 15px;
z-index: 99; /* Важно!
Всплывающие подсказки всегда выше
нижеследующих элементов */
min-width: 400px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
cursor: default;
}
.helptip div:hover,
.helptip span:hover {
background: #fff;
}
.box {
display: flex;
}
</style>
<script>
function helptip(t) {
// Разрешаем закрытие подсказок
// Создаем постоянную переменную этой функции для этих целей
// Условимся: если ноль, то можно закрывать, а если единица, то нельзя
helptip.v = 0;
// Берем последний дочерний тег
var b = t.children[(t.children.length-1)];
// Если открыт, то закрываем
if (b.style.display=="block") helptipx();
else {
// Закрываем все
helptipx();
// Открываем текущий
b.style.display = "block";
// Запрещаем закрытие подсказки вызванного последующими событиями
helptip.v = 1;
}
}
// Функция закрывает все подсказки
function helptipx() {
// Если было нажатие для открытия подсказки, то закрывать нельзя
// Поэтому проверяем:
if (helptip.v==1) {
// Разрешаем закрытие в будущем
helptip.v = 0;
// И выходим
return;
}
// Выбираем все теги с классом .helptip
var s = document.querySelectorAll(".helptip");
// и перебираем их циклом
for (var i=0; i < s.length; i++) {
// Скрываем последний дочерний тег
s[i].children[(s[i].children.length-1)].style.display = "none";
}
}
</script>
<div>
<div style="width: 100%;">
<div style="float: left; width: 60%; height: 30px;">content</div>
<div style="float: left; width: 30%; height: 30px;">content</div>
<div style="float: right; width: 10%; height: 30px;"><div class="helptip" onclick="helptip(this)" title="Нажмите для того, чтобы получить справку" style="display: inline-block;"><strong>?</strong> <span title="Нажмите, чтобы закрыть справку">Справка.</span></div></div>
</div>
</div>
<p><strong>А в таблице все работает</strong></p>
<table width=100%>
<tbody>
<tr>
<td width="60%">content</td>
<td width="30%">content</td>
<td width="10%"><div class="helptip" onclick="helptip(this)" title="Нажмите для того, чтобы получить справку" style="display: inline-block;"><strong>?</strong> <span title="Нажмите, чтобы закрыть справку">Справка.</span></div></div></td>
</tr>
</tbody>
</table>
