[Wic_]

Использую готовый скрипт для подсказок. В таблице без проблем работает вот в таком виде:

Но мне нужно это все на дивах сверстать. Пробую так:
Но при нажатии на кнопку, 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>